Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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.

  • #2
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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

  • Users who have thanked waynenort for this post:

    joelbrandman (08-30-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you,

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

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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>

  • Users who have thanked waynenort for this post:

    joelbrandman (08-30-2012)

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    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 01:23 PM.

  • Users who have thanked waynenort for this post:

    joelbrandman (08-30-2012)

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!!

  • #8
    New Coder
    Join Date
    Aug 2012
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry here is the example I was referring to.
    http://www.vitaminwater.com/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •