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


Tags: jquery,css,css3

Problem :

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



Solution :

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


    CSS Howto..

    How to have background-image and gradient background-color work on one selector in CSS?

    How can I organize my css rules?

    how to rewrite relative url in minified css with cssmin?

    text over horizontal line…How do I make the line gradient?

    How to create javascript or css fadeInDown on mouseover?

    How can I disable inherit in CSS?

    How to align images in a mosaic style? html/css

    What to do to align text as shown in the image using HTML and CSS?

    How to add a fade out at the end of this CSS animation?

    How to restrict character limit by line or # of characters with css?

    how to display navigationMenu div left side of the slider

    How can I insert new text with a hyperlink into a page in CSS?

    Show a sentence with animation

    How to detect clicks outside of a css modal? [duplicate]

    How to style SVG with external CSS?

    How can I change the background-color using ng-class?

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How can i change background image opacity without changing on div content? [duplicate]

    Responsive website - how to debug a non-responding responsive css?

    How to add css for specific input type text

    How to create a box having border top width more than content at different browser display size?

    Jquery Show Hide with attribute

    How to place an HTML element over another using CSS

    How to make CSS for HTML5
    work properly in IE?

    how to remove css property using javascript?

    HTML table show last column using media queries

    How to replicate this css media jquery using javascript to support IE

    How to do this kind of Button in CSS?

    Can't figure out how to set color for specific div's in the loop

    How do I span columns with a div based table?