Making a full screen image background

Question

I basically want to make a full viewport background image.

This is my code:

<html>
    <body>
        <div class="container">
        <img src="loginBg.png" height="100%" width="100%">  
    </div>
</html>

And stylesheet goes like:

.container{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

The problem with this approach is, the image is full screen but there is some space below it, because of this space the page is scrollable. I checked it in firefox ubuntu, the white space is not there.

Thanks in advance

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

Real solution - CSS background images

Use a CSS background image on the body in conjunction with no-repeat and background-size.

2 Examples

With `background-size: cover` to maintain height and width ratio

body {
    background: url(http://www.placehold.it/200) no-repeat;
    background-size: cover;
}

With `background-size: 100% 100%` to stretch

Note: html,body { height: 100% } allows the percentage background size.

html,body {
  height: 100%;
}

body {
  background: #F00 url(http://www.placehold.it/200) no-repeat;
  background-size: 100% 100%;
}

Read more:

The background property
The background-size property
Relevant question - When to use IMG vs. CSS background-image?

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 04 '14 at 15:22

misterManSam

24,303
11
69
89

but if i select a image whose base dimensions are bigger than the diemnsions of a screen , the image is cut .. any way to display full image ? – Teja Reddy Oct 04 '14 at 15:33
Use `background-size: contain` as an alternative. – Marc Audet Oct 04 '14 at 15:34
@TejaReddy - `background-size: 100% 100%;` would give you the same result as the `` – misterManSam Oct 04 '14 at 15:48

score 1 · Answer 2 · answered Oct 04 '14 at 15:28

1

Js Fiddle

use display:block for the image issue will be fixed

.container{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}
img{
    display:block;
}

answered Oct 04 '14 at 15:28

Vitorino fernandes

15,794
3
20
39

score 1 · Accepted Answer · answered Oct 04 '14 at 15:28

You could use a background image on the body tag, which makes a lot of sense.

The problem that you noticed is due to the image being an inline element, which adds some space below the image and triggers an overflow condition.

You can fix by adding:

.container img {
    display: block;
}

You could also use vertical-align: top to remove the extra white space or apply overflow: hidden to hide the overflow, all workable options.

Making a full screen image background

3 Answers3

Real solution - CSS background images

2 Examples

With background-size: cover to maintain height and width ratio

With background-size: 100% 100% to stretch

With `background-size: cover` to maintain height and width ratio

With `background-size: 100% 100%` to stretch