How to stretch the background image to fill a div

background, background-image, css, html

Solution

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

Problem

I want to set a background image to different divs, but my problems are: - The size of image is fixed(60px). - Varying div's size How can I stretch the background-image to fill the whole background of the div? ``` #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } ``` Check the code here.

Original source