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(; 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 

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.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!