CODEWITHSUNDEEP
htmlcssresponsive-design
acctman
acctman

Reputation: 4349

Responsive: resize background image in div

I'm using the code below to display an image as a background in a div. How do I resize it?

#header {
    height: 255px;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    background-position: 50% 50%;
    background-image: url('../simg/header.png');
}

Upvotes: 0

Views: 12791

Answers (3)

Edwin
Edwin

Reputation: 1

Another approach you can try is to set the css 

background-size:contain;  
width:50%; 
max-height:255px;

and let the browser figure out the height which results in it maintaining the aspect ratio.

Upvotes: 0

Mak
Mak

Reputation: 604

You can try controlling the size of the background by using the background-size property.

E.g.:

#header {
height: 255px;
-webkit-background-size:50%;
-moz-background-size:50%;
background-size:50%;
background-position: 50% 50%;
background-image: url('../simg/header.png');
}

This will reduce the background image to exactly half in either dimension.

Upvotes: 3

Lukas
Lukas

Reputation: 7734

try Easy Background Resize .js http://johnpatrickgiven.com/jquery/background-resize/

Upvotes: 1

Related Questions