Crop background-image using CSS

Question

I have a background-image on the body tag which is around 500px high. This is fine for the index page, however on other pages it does not look right. I want to be able to crop the background-image on other pages to around 300px high, but still using the background-image in the body tag.

Is this possible using just CSS?

I recommend you to check the previous discussion on this topic http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — Sreenath Nannat, Oct 12 '11 at 10:16

score 5 · Answer 1 · answered Jun 06 '14 at 07:54

Make bg image 300px height, not crop, but scale:

background-size: auto 300px;

But you can't crop to an area smaller than the tag where background is set. You have to write a tag inside with the desired height set bagground there and then crop:

 background-size: cover;

score 2 · Accepted Answer · answered Oct 12 '11 at 10:13

2

background-size http://www.css3.info/preview/background-size/

answered Oct 12 '11 at 10:13

Alistair Laing

983
1
7
18

19

This is scaling, not cropping. – usr Mar 15 '17 at 13:55

Santana6.35 · Answer 3 · 2011-10-12T15:25:47.940

0

Perhaps something like background-origin and background-clip could also help you

edited Oct 12 '11 at 15:25

answered Oct 12 '11 at 10:15

Santana6.35

198
1
3
15

Crop background-image using CSS

3 Answers3