Snip3r_bow Snip3r_bow - 6 months ago 10
HTML Question

How to proper use cover background.image property

I have a few

div
s (sections) and I want them to have a
background
spread all over the section.
I have this image
1920x1080 px
and I'm using these properties to display it:

#first{
background-image: url(images/officialWallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}


I'd like to know if there's a way to make display the image like
cover
does, but starting from the top of the image so it does't get cropped.

Leaving you my website so you can understand what I mean when I say the top of the image is cropped! (The first section has
cover
, the second
contain
so you can see the difference)

Answer

Option 1: If you just want the top part of the image to display and don't care about the bottom part, just remove the background-position:center center.

#first {
  background-image: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center center; */
}
<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>

Option 2: You may use contain and get a result where the whole image is displayed, just a little smaller.

#first {
  background-image: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; 
}
<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>

Option 3: Using fixed,

#first {
  background: url(http://clashnow.maxfet.net:9010/images/officialWallpaper.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<div class="section fp-section fp-table active fp-completely" id="first" style="height: 459px;background-color: rgb(204, 204, 204);">
  <div class="fp-tableCell" style="height: 459px;"></div>
</div>