#Css image responsive resize code#

test Īlso the :after does not seem to with with Brians technique. I used to used this technique when the image size was fixed. The hover image works well with an animation because when you rollover it it gets called but when you roll off you get no anim when it goes back to the normal image. I was making the calculation the wrong way round.īackground-image: url(“./img/image1.jpg”) Īn interesting one with this techniques is I tried adding css effects to the images (just for fun). Tags: background image, CSS, responsive, sprite, tutorial, website

#Css image responsive resize code#

He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life. If you would like to see a real-life and real-creepy example I made using my own face, check it out here!īrian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. So if I wanted to display the second image, I would have to use background-position: 25% 0.

What background position do you use? Well… 100% / (5-1) = 25%. You want to display the SECOND image in the row. You have FIVE images in one sprite that you wish to use, all in a row. Again, it’s not that intuitive, but with the formula it’s a little easier. The second, background-position: 33.33333% 0. So to display the first image, you set background-position: 0 0. Percent Increments to Use = 100% / (Discrete images in your sprite – 1) This formula assumes each image in the sprite is the same size, and that each image is the same size as the element (i.e.: fits it exactly). So let’s break this down into a formula I came up with. The best way I can explain it in words is this: the distance between 0% and 100% for your background position is the distance between when the left edge of your background image is touching the left edge of your element, and when the right edge of your background image is touching the right edge of your element. This is actually quite complicated and not at all intuitive. Actually USING this positioning system can be a little confusing, so let me break it down for you. 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.