CODEWITHSUNDEEP
css
olo
olo

Reputation: 5271

CSS - Mobile image resize

The method I am currently using is to add <img src="A-Button-Image.png" style="width:100%;"> in HTML sheet and the image size could scale up and down depends on the screen size.

However, A-Button-Image.png contains two images, hover and normal status. Thus, I'd like to use background-position to trigger the rollover effcts? Is there a way to using CSS to control background-position but without losing image resize ability? I know there is another solution is onmouseover & onmouseout, but I still prefer CSS.

Thanks

Upvotes: 0

Views: 941

Answers (2)

olo
olo

Reputation: 5271

The solution is to make the background-size to 100% and padding-bottom to percentage.

Upvotes: 0

Mateusz Kocz
Mateusz Kocz

Reputation: 4602

There's a background-size property for your needs. Just set it to 200% and you will get both scalability and spriteability.

See for yourself.

You could even use more than two images in your sprite. You will just need to multiply a number of images by 100% and put the result in a background-size property.

Upvotes: 1

Related Questions