2

I have a question about resizing background images. I have a div and it's length varies based on the device the webpage is viewed on.

PC: Div = 500px * 500px
Tablet: Div = 300px * 300px
Mobile: Div = 200px * 200px

I also have an image which is 600px * 600px. I want to fit this image to fill up the div entirely remaining the aspect ratio. Then when a user hovers over the image I want to create a hover effect. This is the hover-effect I want:

http://mijn-webwinkel.nl/test2.php

(don't mind the text on the right -> it was for testing only)

I have searched the web for a good solution. There are several solutions for css hover effects (but all require background-images) and several for resizing within divs (but they all require using non-background-images).

Is there a solutions for combining both?

Martijn Aikema
  • 63
  • 2
  • 7

2 Answers2

3

background-size: cover;

works for resizing the background image to fit

Ryan Charmley
  • 1,127
  • 15
  • 18
1

Does this work?

http://jsfiddle.net/kcWQf/1/

The 3 separate images are just to show as if you had resized.

Andy
  • 14,427
  • 3
  • 52
  • 76