Css sprites not showing up?

Publishing help General
1

Hi guys,

I haven’t been able to find a way within Webflow to add Css sprites as links, which I didn’t think would be a huge problem as I could either embed the code or change it manually after exporting. It seems I was wrong!

Can anyone help as to why my social media sprites aren’t showing up?

These are all in the footer of the page. Here is what it should look like:
http://www.petsdomain.com.au/natures_test/livestock.html

But here is what I’ve ended up with:
http://www.petsdomain.com.au/natures_test/webflow/index.html

If I inspect the code, everything seems to be there ok, it’s just the images not showing up!

Any help would be appreciated :slight_smile:

Thanks

2

Hi @Plaedien, it seems like you are not linking to the right image path. I changed the path to this in the inspector:

background-image: url('http://www.petsdomain.com.au/natures_test/images/social-top-icons.png');

And the icons showed up as they should. Try changing the path. :slight_smile:

3

Thanks Sergie, rookie mistake! silly me.

4

Hello again.

A little edit to this previous question. Again I’m trying to incorporate CSS based sprites into a design, but the process is confusing in webflow.

Basically what I’m trying to do is have the one image file for multiple hover states.

For example:

.image {
width: 140px;
height: 140px;
background: url(images/tile-sprite-round.png);
background-position: 0px 140px;
}

with hover state:

.a:hover image {
background: url(images/tile-sprite-round.png);
background-position: 0px 0px;
}

I can see in the side panel in webflow has position elements, but this doesn’t seem to effect the sprite how I would have thought.

Is it even possible to use background-position: in webflow for these kinds of sprite based hover behaviours?

5

Well, after more playing, it seems I’ve answered my own question!

For anyone else who wants to use image sprites, here’s what I did.

1. I added a background image to a link block, set the size to auto and the position to the position of the initial sprite image. Tile set to Off, Fixed set to No.

255×554 40.3 KB

2. Next i changed the size of the actual link block (or whatever containing element) to be the size of the particular sprite i wanted to display (in this case 140 x 140px).
Postion auto so that its centered.

251×585 45 KB

3. For the hover state, select hover (!), go to the background image panel, and simply change the position to the relevant area in your image sprite! You can change the pixel values on the left side of the ‘Adjust’ box.

249×543 38.1 KB

That’s it! Here is the public link to check it out for yourself.
Sprite hover is at the bottom of the page, the dog icon.
https://webflow.com/design/nbtest?preview=863e47123af7d68335bcb4291bc4c307

Hope that helps someone :slight_smile:

2 Likes