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%;
}
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.