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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    background image 100% width

    Hi.

    I was lead to believe that the following CSS would make a background image resize to become 100% width:

    Code:
    body {
        background-image: url(image_url);
        background-size: cover;
        background-repeat: no-repeat;
    }
    This worked for me the first time I used it, but after I used some PHP code to randomise the image, the background image is no longer 100% of the body.

    Can't see what is wrong, as the CSS is the same.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    try
    Code:
    background-size: contain;
    instead of
    Code:
    background-size: cover;
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    I tried that, but it didn't work - it seemed to fit the height at 100%, not the width, and it wouldn't stretch images smaller than the browser pane.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by SRD75 View Post
    I tried that, but it didn't work - it seemed to fit the height at 100%, not the width, and it wouldn't stretch images smaller than the browser pane.
    In addition to making the change sunfighter suggested, you need to remove the !important declaration from your background declaration. This is causing the background declaration to override your background-size and background-repeat declarations.

    Also, you need to specify height: 100% on the html element. I'm still not quite sure why, but this is required in every browser.

    Those changes give you code like this:

    Code:
    html { height: 100%; background: no-repeat 0 0 / cover url("Fremantle.jpg"); }
    Note that I only specified the background-position property because it's required to specify the background-size property when using the shorthand background property.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    SRD75 (05-25-2013)


  •  

    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
    •