Responsive: resize background image in div

Question

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');
}

Ahsan Khurshid · Accepted Answer · 2012-08-28 09:28:49Z

3

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.

edited Aug 28, 2012 at 9:28

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

answered Aug 28, 2012 at 9:21

Mak

6041 gold badge14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

acctman Over a year ago

Thanks I was using "cover" and that was throwing me off. one other question when I resize the browser how would I set the "height" to auto adjust with the background-size?

Mak Over a year ago

You can use media queries to control the height based on size of the browser window.

Lukas · Accepted Answer · 2012-08-28 09:14:37Z

1

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

answered Aug 28, 2012 at 9:14

Lukas

7,78420 gold badges80 silver badges127 bronze badges

1 Comment

LeBen Over a year ago

I don't think he's looking for JS here.

Pbk1303 · Accepted Answer · 2014-09-10 20:41:28Z

0

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.

edited Sep 10, 2014 at 20:41

Pbk1303

3,7823 gold badges34 silver badges47 bronze badges

answered Sep 10, 2014 at 20:15

Edwin

1

Collectives™ on Stack Overflow

Responsive: resize background image in div

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related