Search code examples
cssimagecenter

Align top of image when using background: url(myImage) center center no-repeat and background-size: cover

I am using this below commonly used code to make my image cover the screen and remain responsive. But I want to make sure the top of my image is showing at the top, instead of the image being positioned in the center. So it would center on the top of the picture instead of the center center. When it is center center, I cannot see the top of my image as during the resizing it is cut off. I need to see the top of my image. Can anyone help? Thanks.

#cover { background: url('images/boat.jpg') center center no-repeat; background-size: cover; height: 100%; }

Solution

  • This should do it:

    #cover {
  height: 100%;
  background-image: url('http://p1.pichost.me/i/63/1872562.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

#main{
  height: 150px;
}
    <div id="main">
  <div id="cover">
  </div>
</div>