August 6, 2012
Ensuring Div is 100%
Question by Michael
For some reason I can’t get an image to span 100% width across the browser.
You can find my site here.
My div reads:
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg);
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; ">
</div>
Any help would be appreciated.
Answer by Starx
I don’t like the idea of stretching a image to fit the browser’s window. As this depends on the client’s machine on how the site will appear.
So, I will not suggest searching for such solutions. Rather:
- Use repeating image as a background
- Fix the dimensions of the image container. The effect you are trying to create will still look pretty cool
- Detect the screen size and change the background as per the resolution.
