CODEWITHSUNDEEP
htmlcss
Carl
Carl

Reputation: 357

Why i can't display an image to full screen in html?

The problem is, I want to make a full page background, but there's just a blank page. On the other hand, when I add

inside of background div, it displays, but only to the part of that.

HTML and CSS snippet:

.bg{
  background: url(file:///D:/Dev/gamer/img/bg_1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<body>
  <div class="bg">
      <p>random text</p>
      <p>random text</p>
      <p>random text</p>
  </div>
</body>

The background on website: enter image description here

Upvotes: 0

Views: 1286

Answers (4)

Pavan_Naik
Pavan_Naik

Reputation: 1

Try to use pseudo selector properties for background image. Adjust size and opacity according to your need.

.bg::before{
content:"";
position: absolute;
background: url(file:///D:/Dev/gamer/img/bg_1.jpg) no-repeat center center/cover; 
height:100%;
width:100%;
z-index:-1;
opacity: 0.89;
}

Upvotes: 0

Paurush Sinha
Paurush Sinha

Reputation: 165

Check the following code

HTML

    <div class="bg">
            <p>random text</p>
            <p>random text</p>
            <p>random text</p>
    </div>

CSS

.bg{
      background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: 100% 100%;
  height: 100vh
      
    }

*{
    margin: 0;
  padding: 0;
}

Upvotes: 1

qNecro
qNecro

Reputation: 71

It's because your div is just as big as the content inside, if you want the picture to be on fullscreen change the css code tag from

.bg{
  //your code
}

to this

body{
//yourcode
}

Upvotes: 0

Terry
Terry

Reputation: 66133

The .bg element will only be as tall as the content inside of it: it does not grow to the viewport height unless styled specifically as such.

Either set the background image on the body element, or force .bg to grow to at least the current viewport height:

body {
  margin: 0;
  padding: 0;
}

.bg {
  background: url('https://via.placeholder.com/4000x3000') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  overflow: hidden;
}
<div class="bg">
  <p>random text</p>
  <p>random text</p>
  <p>random text</p>
</div>

Upvotes: 4

Related Questions