Home/ Questions/Q 6713665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:24:25+00:00

How to scale background image proportionally which is in background of a div? I’m

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0