Scalable image in wordpress widget background

[calzo]

Hello. I hope someone can help. I have an image in the background of a wordpress widget but when resizing the page the image stays the same size. Is there an easy way using CSS to make the background image scalable, similar to the CSS-Tricks homepage area used for the polls or the lodge login?

Example. I have a twitter widget that dynamically changes height depending on the length of the tweet so I would need the background image to be fluid so that it resizes to the widget box size.

Thanks for your time.

The code I have used for the widget background:

.widget {
background:url(/wp-content/uploads/2012/11/image.png);
background-repeat: no-repeat;
height: auto;
border: solid 0px;
}

[Schwarttzy]

background-size:cover; or background-size:contain;

[calzo]

Perfect, thanks. This worked…

background-size:cover;

and then I added…

background-size:100% 100%;

[Schwarttzy]

That could turn around to bite you by using the 100% stuff.

[calzo]

Is there a better way of doing it?
Using your code alone didn’t work so I had to add the 100% part of it.

[Author]

Posts