CODEWITHSUNDEEP
htmlcss
roh_dev
roh_dev

Reputation: 305

unable to display the background image to full screen of the browser and make it responsive

The background image doesn't fits to the browser window's screen. The background image covers only a portion of the screen maintaining its aspect ratio.I want the background image to cover the entire screen on which it runs.Please help!

html

<div class="container">
    <h1> GAME</h1>
    <div class="color-overlay"></div>
  </div>

css

.container {
    background-size: cover;
    background: #000 url(images/group11.jpg);
    color: #fff;
     background-repeat:no-repeat;
    background-position:center;
   display: flex;
   justify-content: center;
    align-items: center;
    position: relative;
  }
.color-overlay {
 width: 100%;
 height: 100%;
 background: blue;
 opacity: .6;
 position: absolute;

}

Upvotes: 0

Views: 1167

Answers (1)

Mihai T
Mihai T

Reputation: 17697

The problem is that you first set background-size:cover then you set background .

Setting background ( which includes repeat,size,position,image etc. ) after the background-size will overwrite cover with the default setting.

You either set background-size:cover after the background either you set all background declarations that you need ( color,repeat,image etc ) separately, either you declare all in one line using just background

See below

.container {
  background: #000 url(http://via.placeholder.com/350x150);
  /* bg size after */
  background-size: cover;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height:100vh;
  
  /* OR set all separately
  background-image: url(http://via.placeholder.com/350x150);
  background-color: #000;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  */
  /* OR set all in one line 
  background: url(http://via.placeholder.com/350x150) no-repeat scroll center center / cover #000;
  */
  
}

.color-overlay {
  width: 100%;
  height: 100%;
  background: blue;
  opacity: .6;
  position: absolute;
}
<div class="container">
  <h1> GAME</h1>
  <div class="color-overlay"></div>
</div>

Upvotes: 1

Related Questions