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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    393
    Thanks
    48
    Thanked 1 Time in 1 Post

    Background image 100% width, match with height?

    Hiya Everyone!

    Live Demo: Untitled Document

    I've got a background image set in .Website which I need to be 100% width, however I need the hight to be he height of the image too. I'm not sure if this can be resolved with css or I need to look into Javascript?

    I'm not used to working with percentages in html/css, trying to make it cross resolution friendly and whatnot so thank you for any help and/or advice.

    Best Regards,
    Tim

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    So what is the issue other than the fact that it is going to get distorted if you do not maintain the aspect ratio? It seems to work fine with background-size cover. However you don't think need the the z-index with a negative value as the natural stacking order should handle the presentation correctly.

    As for cross-resolution friendly, I am not sure how that will workout without knowing what content is going into the elements. If the screen size is small enough to overflow the viewport, what is the rendering strategy hide? scroll?
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    393
    Thanks
    48
    Thanked 1 Time in 1 Post
    I need the image to be 100% width and then not be to cut off at the bottom, instead the end of the website to be the end of the image.

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Then what you are doing should work fine as long as you do not have to support versions of IE prior to IE9.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    393
    Thanks
    48
    Thanked 1 Time in 1 Post
    What I have done doesn't work though as half the image is cut off? I want the maximum size of the page to be what the image is shown for the person whether that is 1000px, 500px or whatnot...

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    393
    Thanks
    48
    Thanked 1 Time in 1 Post
    I have worked my way around this using JQuery, view the results on my new thread to try and resolve page flip altering things: JavaScript frameworks


  •  

    Posting Permissions

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