Jayden Irwin Jayden Irwin - 18 days ago 6
CSS Question

CSS Crop Center & Scale

I want to make a site that works on any display size, and to do so I need a way to crop, center, and scale an image accordingly.

The image is 2560x735 and here is how it should react to different displays:

My current attempt is in this snippet:



div {
width: 100%;
height: 735px;
min-width: 980px;
background-image: url('http://cl.ly/Z0O0/01940_morainelake_2560x1440.jpg');
background-position: center center;
}

<div></div>





2560x735

2560X735

1920x735

1920x735

980x735 — This is the minimum width of the image

980x735

375x735

This is the same image as before (980x735), but scaled to 100% of the display width. Media queries will probably be useful here.

375x735

Answer

I'd say you may be looking to use @media CSS at-rule (review it on Mozilla Dev Network) if you want resizing to occur at specific dimensions. Other than that, just put

body {
    background: url('http://yourimage.com');
}

specify any other applicable properties you need, like no-repeat, et cetera

Look this over http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

Comments