0

I designed a background-image (a water pattern with sand at the bottom) for one of my websites that has a width of 230px and a height of 1230px.

What I want is for this image to

  • repeat itself horizontally to fill the whole 100% width
  • but stretch itself to 100% height of the browser window.

So, what I did was 

<div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;
 background-image:url(bg.jpg); background-repeat: repeat-x"> </div>

but unfortunately this does not stretch the DIV's height to the current browser window.

The only way I saw was to write a div with several IMG tags in it:

<div style="position: fixed; top: 0; height: 100%; overflow: hidden; 
width: 5000px; z-index: -99" align="left">
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>....and so on...</div>

This works like intended...but this can't be the correct practice? Considering accessibility this is a nightmare, no?

Thanks for your help!

JPS
  • 5
  • 4

1 Answers1

0

just created a jsfiddle for your purposes:

http://jsfiddle.net/aT6J6/

try to play with, maybe that fits your requirements.

element
{
    background-size: 100%;
}

for you example:

<div>
    <div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;background:url('http://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg') repeat-x scroll 0 0 / 100% auto rgba(0, 0, 0, 0)"> 
    </div>
</div>

updated fiddle:

http://jsfiddle.net/aT6J6/1/

mercredo
  • 158
  • 2
  • 10
  • Thank you so much! The Jsfiddle was a nice extra, but the property "background-size" really solved the problem! :) I had to add "background-size: 230px 100%" to my fixed div and - voila! – JPS Jun 12 '14 at 01:47
  • Just read that background-size doesn't work with IE<9 - do you worry about that? Or just ignore this old stupid browser? – JPS Jun 12 '14 at 01:58
  • that is pretty much up to you and your target visitors, but you can try some iehacks: http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-i – mercredo Jun 12 '14 at 10:35