CODEWITHSUNDEEP
jquerycss
Jitendra Vyas
Jitendra Vyas

Reputation: 152697

How to scale background image proportionally which is in css background of a div?

How to scale background image proportionally which is in background of a div? I'm not asking background resizing of full <body>background.

In this jsfiddle example http://jsfiddle.net/jitendravyas/aQCen/1/ you will see that text is re-sizing proportionally when you reszie the browser or js fiddle result window. but in this image is not resizing. and I also want to scale the image like text.

I already know the way to resize the image if use it as <img> in mark-up. but in this question I'm asking about how to resize the image which is in css background

Upvotes: 0

Views: 10020

Answers (2)

Paul Murphy
Paul Murphy

Reputation: 81

You can use the css3 property "background-size" however only IE9+, Firefox 4 and Webkit browsers support this. The "cover" and "contain" values might be worth looking at - cover scales the background image to the maximum width or height of the container without cropping the image, whereas contain scales to completely fill the container while some areas may not be visible.

See more here: http://www.css3.info/preview/background-size/

Upvotes: 5

user652649
user652649

Reputation:

try this

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:contain; 
background-repeat:no-repeat;
background-position:center;"></div>

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:cover; 
background-repeat:no-repeat;
background-position:center;"></div>

working in gecko/webkit/opera and probably newers msie

full documentation at:

https://developer.mozilla.org/en/CSS/background-size

Upvotes: 3

Related Questions