Grow your CSS skills. Land your dream job.

Scalable image in wordpress widget background

  • # November 27, 2012 at 9:38 pm

    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(http://cdn.css-tricks.com/wp-content/uploads/2012/11/image.png);
    background-repeat: no-repeat;
    height: auto;
    border: solid 0px;
    }

    # November 27, 2012 at 10:26 pm

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

    # November 28, 2012 at 3:17 am

    Perfect, thanks. This worked…

    background-size:cover;

    and then I added…

    background-size:100% 100%;

    # November 28, 2012 at 11:06 am

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

    # November 28, 2012 at 7:59 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".