CODEWITHSUNDEEP
htmlcss
samiles
samiles

Reputation: 3900

Crop sides of image to size of screen and center align it

I have an image which runs along the width of my site. It is contained in a div with width set to 100%. The image itself is 2560px in width.

I would like the image to be the same width as the page in the browser view, as currently it makes the page longer.

Simply setting the width of the image to 100% has the effect of making it smaller and disproportionate.

Searching suggests it may be possible by setting the max-width to 100%, but this only cuts the end of the image off.

Is there a way to maintain the center alignment, i.e. to crop both ends of the image so that it always remained centered?

Many thanks.

Upvotes: 2

Views: 3577

Answers (2)

António Almeida
António Almeida

Reputation: 10087

I thing what you're searching for is this:

http://jsfiddle.net/promatik/hFsYv/

HTML:

<div id="bg-div"></div>

CSS:

#bg-div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This is going to position the background in the center of the div, and crop it to fill the div in the best way.

Upvotes: 1

bukka
bukka

Reputation: 5203

You should use background-image to set it.

This will allow you to center it easily like so:

body{
background: url("path/to/image") no-repeat fixed center top; 
}

center - centers the image

top - vertically adjusts the image

no-repeat - makes sure the background doesn't repeat

fixed - Follows as you scroll

You may not want all these properties, the one you are looking for is the center.

Upvotes: 1

Related Questions