![]() The only thing we need to change is the background position! The secret is to place the background image using only percents. Now it’s time to set everything up for the hover state. So we set background-size: 200%, since we need it to be twice as large as the space we have assigned for it, since we only want the first half of the image to fit in our div. ![]() We want the first half of the image only to fit. If we were to leave the setting at background-size: 100%, we would end up with the image fitting completely within the div and repeating itself once underneath. On the left 500px we have the first image, on the right 500px we have the rollover image. In our case, let’s say our image is 1000px wide and 500px tall. If we want it to be smaller and have to repeat, we go smaller. If we want the image to be larger than what actually fits in the container, we go bigger. It does not STRETCH the image in both directions, it assumes that the image fits perfectly WIDTH-wise into our container, and then calls that 100%. Now here’s what’s really interesting about the background-size property.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |