Search code examples
htmlcsstwitter-bootstrapbackground-image

Background image using HTML5 to fit the page


I want to make one image the full background of a website! I know it sounds pretty simple, but it just got me crazy, it doesn't fit the page, this the last try I reached with!

CSS :

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

I'm using Twitter Bootstrap as well, but the thing is even without that I can't get it right!

Any help would be appreciated.

EDIT: and I didn't use exact pixels because I'm trying to make a responsive + mobile design.

I don't know why they downvoted the question! But this is how I solved it!

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

Solution

  • EDIT: I created a DEMO with some unnecessary things removed. This has the benefit of not windowing your background picture. The DEMO works but was not as extensively tested as the quoted code below.

    I recently worked on a project where we needed this exact thing. I'm posting from my project files, so some of this may be unnecessary as it was a team member that wrote this.

    Start by setting properties of html and body. Then, I have a root div inside body called background.

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #background {
        background: #000000 url(urlHere) no-repeat bottom left;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        height: auto !important;
        min-height:100%;
    }
    

    Again, some of that I'm sure is unnecessary, but I hope it helps.