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 apply different CSS styles to 2 elements with the same class name?

    How to set two background color to one element in CSS?

    How to maneuver between two divs using CSS?

    How to keep a navbar toggle open until selection is made

    How to set cursor off screen?

    How to access lower children using > operator?

    How to make no borders in a td rowspan rows

    How to use scaleable pixels in css

    How do you get a css box to extend the entire width of the browser window?

    How do I add a text shadow with CSS2 [closed]

    how to indent html output using CSS

    How to set DIV's width based on CSS indexes

    how to change li last anchor color

    Show nested list on click in Joomla (1.7.0)

    How to target separated class names through css?

    How to edit itemprop in div class in CSS? (Wordpress)

    How JQuery can parse colors in text?

    How do I get text side by side in HTML inside div?

    How to prepend a div to another div using javascript

    How to use the Xpath and CSS selector in for function

    how to change element css class runtime using javascript

    jQuery how to add another css in code?

    How to add a specific class to select2 drop element?

    Show window inside any web page

    How to center absolute div horizontally using CSS?

    How do I change tab size in Vim?

    How to use css to display an avatar pic with details next to it?

    How to handle right-to-left text-input fields the right way?

    How do I stop the text from moving when hovered? (background-image is involved)

    R: Shiny: How to align a gvisTable to the center in shinyapp