CODEWITHSUNDEEP
cssbackground-imagescaling
moonie457
moonie457

Reputation: 35

Scaling CSS background image relative to page width

I'm trying to make a responsive webpage in which I want to display some button images with a hover-over image. These buttons are 100x100 px, however, I'd like them to scale down to a smaller % of that once the webpage gets below a certain width (i.e. on mobile devices). I currently have the following CSS to display one them:

.tumblr {
    margin-bottom: 10px;
    width: 100px;
    height:100px;
    display:block;
    background:transparent url('http://i.imgur.com/BNYulhj.jpg?1') center top no-repeat;
}

.tumblr:hover {
   background-image: url('http://i.imgur.com/BNYulhj.jpg?1');
}

I made a jsfiddle of what I'm trying to do here. There will be 3 buttons per row, so that at 100x100px each I'd like them to start scaling down in their entirety whenever the available area width is <300~px (a little extra for margin). I've tried defining a background-size in several ways but it doesn't seem to do what I'm looking for.

Any help would be super appreciated!

Upvotes: 0

Views: 145

Answers (1)

noio
noio

Reputation: 5812

Partial answer:

The behaviour you describe can be implemented using a combination of width and max-width (see also this question: CSS width 100% OR max-width in pixels):

.connect li {
    width: 32%;
    max-width: 100px;
}

http://jsfiddle.net/pvcp7Lok/2/

Partial answer because: when you're using an <a> with background in stead of an <img>, getting the height to correspond to the width is a little bit tricky (see this article), so in the fiddle I have just set a fixed 100px height for the images. In any case, set background-size to a percentage to make sure the background scales according with the <a>s size.

Upvotes: 2

Related Questions