css repeat-y not working in IE8

Question

I am using a div tag and I am applying css to it. Please find below the div tag

<div class="testcss">
</div>

My css class is as follows

.testcss
{
     background-image: url('images/imag2.gif');
     background-repeat: repeat-y;
     background-position: bottom-left;
     padding-left: 10px;
     padding-right: 10px;
}

The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9. Even it is working fine in IE10. There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9. Is there some way that we can fix this in IE8 and IE9.

Any help would be greatly appreciated.

Thanks in Advance.

Regards, Rahul Rathi

Works great here in IE8 (not a later IE in IE8 mode), in spite of the error feitla found. You did try to put some content in the div, didn't you? — Mr Lister, Jul 23 '13 at 18:05

feitla · Answer 1 · 2013-07-23T18:09:27.990

0

I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:

.testcss {
    background: url('images/imag2.gif') bottom left repeat-y;
    padding-left: 10px;
    padding-right: 10px;
}

http://jsfiddle.net/feitla/85XFu/

PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.

edited Jul 23 '13 at 18:09

answered Jul 23 '13 at 18:02

feitla

1,334
1
7
12

sulfureous · Answer 2 · 2013-07-23T18:49:36.250

I agree with @feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.

I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.

Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.

I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.

You would end up with:

HTML

<div class="testcss"></div>

CSS

.testcss {
   background: url('images/imag2.gif') repeat-y left;
   padding: 0 10px;
}

Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.

css repeat-y not working in IE8

2 Answers2