Take the 2-minute tour ×

I have a sidebar with 2 background images. This is my CSS:

background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;

when I change the width of the browser with the mouse (I use responsive design), the second image disappears in some position. But if I refresh the page or change the width, everything restores. Do you have any idea why does the image disappear?

share|improve this question
you are making first image size 100%, and so it covers all the browser page..and the second image is pushed down. So it seems to disappears. –  ygssoni Aug 28 '12 at 17:36
What browser did you test this in? Is there an online example of your problem? Maybe you could create a Fiddle. –  Jasper de Vries Aug 29 '12 at 15:02
Second @JasperDeVries: As it is this question is very hard to answer. Can you add some more details? Add some html and (links to) sample images so the question contains a short but working example. Explain what you mean by "some position". Add the example in a fiddle as well. –  Jeroen Sep 2 '12 at 7:18
have the same issue with only one background image –  Idan Shechter Jan 14 '13 at 19:16
My problem was solved, I put the background-image below the background size, need to put it above it –  Idan Shechter Jan 14 '13 at 19:18
add comment

1 Answer

I had a similar issue,
I made 2 classes of CSS,
Detected the browser width by JavaScript,
Attached the right one to the class by JavaScript;

share|improve this answer
add comment

Your Answer


