resizing and maintaining aspect ratio on a background image.

joelbrandman · 08-30-2012, 11:24 AM

Can anyone help me with how you would go about designing a site similar to what can be seen in the following link,
http://www.londongolf.co.uk/default.aspx

I want to be able to place a background image into the page and the image will maintain its aspect ratio when resizing the browser window. As you can see in the link provided it maintains its size when made smaller or bigger.

I'll be so grateful if someone can help me with this!

Thanks.

waynenort · 08-30-2012, 11:38 AM

They've done it by applying this CSS to the background image:

.background-image {

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: -9;

}

The negative z-index sends is to the back and the 100% width keeps is spanned across the page. The height for this resizes proportionally to the width. The image size is 1440 x 960 pxls

joelbrandman · 08-30-2012, 11:47 AM

Thank you,

Does this mean that the background image is placed into the HTML code rather than straight into the css code?

waynenort · 08-30-2012, 11:53 AM

Yes the image is placed in the body and apply the CSS as a class. Don't use the actual image measurements in the body. Just use a large enough background image so it doesn't appear pixilated when it fills the screen. Something like:
<body>
<img src="yourImage.jpg" class="background-image" />
</body>

joelbrandman · 08-30-2012, 12:06 PM

Brilliant, thank you again!

Using this method will then allow me to use different images for the background image if I were to create new pages like in the website example i provided?

Is this a better approach than placing an image in the body tag or in the CSS under HTML as that will interfere with new pages when added.

Plus if i were to use a navigation menu in a template your method will allow me to use multiple images for different pages?

Thank you.

waynenort · 08-30-2012, 12:20 PM

There's many ways of creating website backgrounds. Depends what you want to achieve and this looks like it'll do what you need with different background images.
It looks like you found what your after....

joelbrandman · 08-31-2012, 02:50 PM

Any idea how you would place the menu bar over to the right while maintaining its position as you scale the browser window like seen in the website example provided?

Thanks!!

joelbrandman · 08-31-2012, 02:51 PM

Sorry here is the example I was referring to.
http://www.vitaminwater.com/