CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackground-image
0bserver07
0bserver07

Reputation: 3471

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

Upvotes: 9

Views: 95463

Answers (4)

monteirobrena
monteirobrena

Reputation: 2620

You need set the height for first element of page.

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

Upvotes: 0

StudenProg
StudenProg

Reputation: 1

Why not import the img's into Flash (Microsoft Program) and convert the img's into Vector IMG's (Vector: Images who's quality isn't effected (as much) when Altering the height and width.) After making adjustments to the vector img (changing the img to the resolution of your current platform) save it and apply it to your HTML. I would advise making a backup copy especially if your cross platforming you HTML for different resolutions.

Upvotes: 0

Corey Horn
Corey Horn

Reputation: 499

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.

Upvotes: 13

WooCaSh
WooCaSh

Reputation: 5212

You can do this by adding property background-attachment: fixed;

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

DEMO

But you must know that if ratio of page dimension and image dimension are diferent then image can be cutted in window.

EDIT

If for you height is more important change parameter backround-size to containt:

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

Contain Demo

Upvotes: 6

Related Questions