CODEWITHSUNDEEP
css
arb
arb

Reputation: 7863

CSS3 Background Size "Zoom"

I am trying to implement a full page background image as discussed here.

I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.

Is it a problem with the size of the image or do I have something else wrong?

Here is a link to the page. achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.

No JavaScript solutions please. I know this achievable with just CSS.

UPDATE

Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?

UPDATE

I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.

Upvotes: 3

Views: 13551

Answers (2)

Vaibhav S
Vaibhav S

Reputation: 163

I believe we can suffice this requirement by using following two Solutions:

a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution. b. Use img tag with height and width as 100%

Upvotes: 3

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Change background-size: cover to background-size: contain

It looks perfect this way!

enter image description here

Upvotes: 2

Related Questions