CODEWITHSUNDEEP
htmlcss
sark9012
sark9012

Reputation: 5717

Ensure image is zoomed out

I'm displaying some images as backgrounds on a webpage but the image isn't displaying entirely 'zoomed out'. Instead, it's taking just the left side for example.

How can I make the image display completely? Is it to do with the resolution?

#kitchenimage{
      width:100%;
      background: url("siteimages/kitchenimage.jpg") no-repeat center fixed;
      padding:200px 0;
}

The image is 3249 x 1679.

Thanks.

Upvotes: 1

Views: 35

Answers (1)

Etheryte
Etheryte

Reputation: 25310

Depending on which option prefer, define one of the following:

background-size: cover;
background-size: 100% 100%;
background-size: contain;

The first will scale the background image to be as large as possible so that the background area is completely covered by the background image, leaving some parts of the background cropped while keeping aspect ratio.
The second won't keep the aspect ratio and will cover the background without any cropping.
The third will scale the image to the largest size such that both its width and its height can fit inside the background area.

Upvotes: 1

Related Questions