#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Background image fits 100%


    Hello, I'm trying to make a background-image fit 100% of my background.

    What I have is:

    html,body {
    height:100%;
    width:100%;
    margin:0;
    background-image: url(Background_Html.jpg);
    background-size: cover;
    }

    My problem is I have content that is more than a page so the user has to scroll down. When they scroll down the image either repeats or there is an empty color.

    How can I get the background to fit 100% of my background even with scrolling so that the image stays in place no matter what yet is the size of their screen?

    Thanks,
    Ubercakes
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Your approaching it the wrong way

    Your going to need a div with that exact same styling but with position fixed and a z-index of 1 and make sure this div is seperate of all the other elements
    Then with the rest of your elements if you haven't already, surround them in a container div and give this div a z-index of 2
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    jack13580, wouldn't it be simpler to just use "background-attachment:fixed"?

    P.S. Welcome to DevShed Forums, Ubercakes.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Fixed :)


    html,body {
    height:100%;
    width:100%;
    margin:0;
    background-image: url(../Images/Background_Html.jpg);
    background-attachment:fixed;
    background-size: cover;
    top: 0px;
    left: 0px;
    }

    Thank you!
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    You're welcome.

    The "top" and "left" properties only apply to positioned elements. Also there's not much point in setting "width:100%" on those elements.

    I would recommend writing it like this:
    Code:
    html,body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	background: url(../Images/Background_Html.jpg) fixed;
    	background-size: cover;
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Thanks!


    Thanks, that works perfectly.

IMN logo majestic logo spyfu logo threadwatch logo seochat tools logo