Background image using HTML5 to fit the page

Question

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

try width:100% then remove the comment you have in the background and there you go. — Akatosh, Jun 12 '13 at 17:12
Cover will scale the image the full width of the container while maintaining aspect ratio. I imagine that your background is repeating while using cover, try this, `html, body {width: 100%; min-height: 100%; height: 100%; overflow: hidden;}`; — , Jun 12 '13 at 17:15
Copy and paste this in your browser to test: `data:text/html,` — , Jun 12 '13 at 17:20
@CeaneLamerez thanks for the test, but the background doesn't repeat, its one image. and it keeps giving me full width, only the height! — 0bserver07, Jun 12 '13 at 17:24
Could you clarify that comment? It seems that you want full width and full height. If you've set the width and height of the page using `html, body {width: 100%; height: 100%;}`, WooCaSh's answer should work for you. — nondefault, Jun 12 '13 at 17:30
If you want your image to completely fill the container, maintain it's aspect ratio, but stay within the boundaries of your container then use `background-size: contain;` EDIT: That way you will see the full image, rather than using `cover` which will cut your image off, in some aspect ratios. — , Jun 12 '13 at 17:32
@nondefault , when I use 'html, body {width: 100%; height: 100%;' it makes the page scroll-able but the image still is cut! — 0bserver07, Jun 12 '13 at 17:33
And duhhh! It's not repeating, because you have no-repeat, but if you see blank space / that color you set under your image, try my first comment out or WooCaSh's answer, both should work out appropriately. — , Jun 12 '13 at 17:34
@CeaneLamerez, I tried that from the tutorials, it only gives a small portion of the image! — 0bserver07, Jun 12 '13 at 17:34
@CeaneLamerez, sir! thanks no need to duhh me! the background is a VIEW! a COMPLETE wallpaper, I don't want it to repeat! — 0bserver07, Jun 12 '13 at 17:42
I was duhhing myself, silly! =) We know you DO NOT want to repeat it =) and you want it to cover the whole page. But if you just want the full width and height of the image, then use `background-size: auto` if you want to cover the full width the try `background-size: 100% auto` — , Jun 12 '13 at 17:44
@CeaneLamerez It's look like he want to get walpaper in the same ratio/scale what original... without any white spaces without any cuts... It's just impossible. I mean it's possible if he prepare all of the images combinations to cover all dimensions/ratios and scels of image :) — WooCaSh, Jun 12 '13 at 18:06

Corey Horn · Accepted Answer · 2013-06-12T18:55:22.660

13

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.

edited Jun 12 '13 at 18:55

answered Jun 12 '13 at 18:09

Corey Horn

499
1
4
16

`height: 100%; height: auto !important;` Is a kind of hack or your mistake? First you set height to 100% then override it to auto -.- – WooCaSh Jun 12 '13 at 18:25
That is why I noted that some of it was unnecessary, and that I was bringing it in from an old project. More just trying to help than anything. – Corey Horn Jun 12 '13 at 18:30
Thanks, I chose yours, because it gave me an idea to solve it this way
` #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 { } #myfooter { } ` – 0bserver07 Jun 12 '13 at 20:39
I've practiced a little removing the junk. What I found out was that the most important part was: height 100% to parent (html,body). height: auto !important; (at image) and (min-height:100%;) at image. There is also some stretching at my case which can be fixed with background-size: cover; Thanks a lot though! – fllprbt Nov 17 '17 at 19:45

WooCaSh · Answer 2 · 2013-06-12T17:40:43.297

6

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

edited Jun 12 '13 at 17:40

answered Jun 12 '13 at 17:20

WooCaSh

5,180
5
36
54

It still doesn't work! It cuts from the height! I made the dimensions of the image even smaller, still! by smaller I mean 1024x760.. still :(! – 0bserver07 Jun 12 '13 at 17:32
Because window height isn't the same like your monitor resolution. Browser have smaller height than your monitor. Can you show us the result of mine code? Just share printscreen. – WooCaSh Jun 12 '13 at 17:35
I can't post a photo yet! But when I use your snippet, it only cuts the lower portion of the image. – 0bserver07 Jun 12 '13 at 17:39
Okay, now what happened is that the image viewing full height, but the width is shrink to the middle, which leave the sides blank empty with the background color I gave. :(! Gosh can't blv am stuck with this. – 0bserver07 Jun 12 '13 at 17:49
You can't get image full passed into browser body because if someone use other browser and have for example different top bar then height of his body is smaller than your. So ratios will never be the same. Use my examples and resize browser windows to see what hapenes with background. – WooCaSh Jun 12 '13 at 17:56

score 0 · Answer 3 · edited Jan 28 '20 at 22:49

0

You need set the height for first element of page.

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

edited Jan 28 '20 at 22:49

Dharman

30,962
25
85
135

answered Jun 12 '13 at 17:23

monteirobrena

2,562
1
33
45

1

I don't think he speaks Portuguese =( Ele nao falo portugues – Jun 12 '13 at 17:27
Yes, I can put also link in Chinese/Ink/Egyptian languages which will be so useful like your – WooCaSh Jun 12 '13 at 17:37
Sire I tried this, its the same as the above comment, it keeps giving me a scroll-able window, but not the actual size of the image. – 0bserver07 Jun 12 '13 at 17:40
@Observer What's the size of the image? – monteirobrena Jun 12 '13 at 17:45
@monteirobrena one of them is 1600 x 2024, and then I tried another one which is 2800x1700 from another website, still not making a change! – 0bserver07 Jun 12 '13 at 17:51

score 0 · Answer 4 · answered Feb 21 '14 at 06:14

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.

Background image using HTML5 to fit the page

4 Answers4

EDIT