Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-30-2012, 11:24 AM   PM User | #1
joelbrandman
New Coder

 
Join Date: Aug 2012
Posts: 10
Thanks: 4
Thanked 0 Times in 0 Posts
joelbrandman is an unknown quantity at this point
Smile resizing and maintaining aspect ratio on a background image.

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.
joelbrandman is offline   Reply With Quote
Old 08-30-2012, 11:38 AM   PM User | #2
waynenort
New Coder

 
Join Date: Jul 2012
Posts: 62
Thanks: 5
Thanked 14 Times in 14 Posts
waynenort is an unknown quantity at this point
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
waynenort is offline   Reply With Quote
Users who have thanked waynenort for this post:
joelbrandman (08-30-2012)
Old 08-30-2012, 11:47 AM   PM User | #3
joelbrandman
New Coder

 
Join Date: Aug 2012
Posts: 10
Thanks: 4
Thanked 0 Times in 0 Posts
joelbrandman is an unknown quantity at this point
Thank you,

Does this mean that the background image is placed into the HTML code rather than straight into the css code?
joelbrandman is offline   Reply With Quote
Old 08-30-2012, 11:53 AM   PM User | #4
waynenort
New Coder

 
Join Date: Jul 2012
Posts: 62
Thanks: 5
Thanked 14 Times in 14 Posts
waynenort is an unknown quantity at this point
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>
waynenort is offline   Reply With Quote
Users who have thanked waynenort for this post:
joelbrandman (08-30-2012)
Old 08-30-2012, 12:06 PM   PM User | #5
joelbrandman
New Coder

 
Join Date: Aug 2012
Posts: 10
Thanks: 4
Thanked 0 Times in 0 Posts
joelbrandman is an unknown quantity at this point
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.
joelbrandman is offline   Reply With Quote
Old 08-30-2012, 12:20 PM   PM User | #6
waynenort
New Coder

 
Join Date: Jul 2012
Posts: 62
Thanks: 5
Thanked 14 Times in 14 Posts
waynenort is an unknown quantity at this point
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....

Last edited by waynenort; 08-30-2012 at 12:23 PM..
waynenort is offline   Reply With Quote
Users who have thanked waynenort for this post:
joelbrandman (08-30-2012)
Old 08-31-2012, 02:50 PM   PM User | #7
joelbrandman
New Coder

 
Join Date: Aug 2012
Posts: 10
Thanks: 4
Thanked 0 Times in 0 Posts
joelbrandman is an unknown quantity at this point
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 is offline   Reply With Quote
Old 08-31-2012, 02:51 PM   PM User | #8
joelbrandman
New Coder

 
Join Date: Aug 2012
Posts: 10
Thanks: 4
Thanked 0 Times in 0 Posts
joelbrandman is an unknown quantity at this point
Sorry here is the example I was referring to.
http://www.vitaminwater.com/
joelbrandman is offline   Reply With Quote
Reply

Bookmarks

Tags
aspect ratio, background image, css, css3, resizing

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:10 PM.


Advertisement
Log in to turn off these ads.