Css from link

The URL part has to link to a file (something that ends in a .png, .jpeg, or such) – in the code you provided, you’re only linking to a folder. So, start by pointing to an image file.

If you need additional help or if you’re still confused, feel free to reply.

Sorry, I should have been a little more specific. the url does point to a file.

I’m actually trying to use Pinterest so here is what I actually have:

li.Pinterest a {background-image: url(https://Domain.com/wp-content/uploads/2013/11/pinterest_badge_red.png) 0px 0px no-repeat;text-indent: -999em;margin-right: 0 !important}

I see. I can think of a few things that could be wrong, although it’s tough to say without seeing the full site code.

First, try putting single quote marks around the URL path, like so:
url('https://Domain.com/wp-content/uploads/2013/11/pinterest_badge_red.png')

Second, try copying-and-pasting the URL into your address bar and going there, to make sure that the image actually exists, and that you didn’t accidentally alter the URL path.

To be clear, have you seen this code work with a different image? I’m trying to figure out if the issue is with the image, or another part of the code. I don’t think you can specify things like no-repeat on the background-iamge property – if so, changing background-image to just background may fix things.

Thank you for your response. I have tried all that you said and still nothing. Here is the code I have around it:

li.Facebook a {background: url(images/facebook.png) 0px 0px no-repeat;text-indent: -999em;}
li.Twitter a {background: url(images/twitter.png) 0px 0px no-repeat;text-indent: -999em;}
li.Pinterest a {background: url('https://adaclubs.org/wp-content/uploads/2013/11/pinterest_badge_red.png') 0px 0px no-repeat;text-indent: -999em;margin-right: 0 !important}
li.YouTube a{background: url(images/youtube.png) 0px 0px no-repeat;text-indent: -999em;}
li.RSS a {background: url(images/rss.png) 0px 0px no-repeat;text-indent: -999em;}

The next things I’m going to say is probably the reason why it’s not working. The Pinterest part originally had li.Blog with the url pointing to images/blog.png. I thought all I needed to do was change teh word Blog to Pinterest and change the url. Please correct that if I am wrong. I have found one other “blog” in the stylesheet but I don’t know if they are linked to each other.

Ah! The problem is that your Pinterest image is 1000 x 1000 pixels. It is being displayed, but just the tiniest upper corner, which is invisible. The following CSS re-sizes it, but you might want to find a smaller Pinterest logo (one that big will take longer to load, though since it’s at the bottom of the page, people probably won’t notice).

li.Pinterest a {
background: url('https://adaclubs.org/wp-content/uploads/2013/11/pinterest_badge_red.png') no-repeat;
background-size: 29px 30px;
text-indent: -999em;
margin-right: 0 !important;
}

A bigger problem I noticed is that the logo disappears when you move the mouse over it. I understand why, but it’s hard to explain… look at the Pinterest logo you uploaded, and the YouTube logo they’re using.

As far as I can tell, they’ve got some Javascript on the page that switches to the lower, transparent logo when you mouse over it (if you’re wondering why it’s a single image, combining multiple images into one is a popular way of speeding up page loads). Your options for fixing it are:

• Contact the original author and ask them to fix it.
• Make a similar Pinterest logo with transparent bottom.
• Accept is as good enough, for a footer link.

They also have this before it:

#branding .widget {margin-bottom: 0px;}
#branding .SocialWrap {background-color: #E6E7E8;padding: 5px 8px;}
#menu-social-icons, #menu-social-icons-1 {margin-top: 3px !important;}
#menu-social-icons li, #menu-social-icons-1 li  {float: left;list-style-type: none;}
#menu-social-icons li a, #menu-social-icons-1 li a {display: block;width: 29px;height: 31px;margin-right: 5px;}

I’m guessing that takes care of all sizing issues?

there is also this at the end

#menu-social-icons-1 li a:hover, #menu-social-icons li a:hover {background-position: 0px -33px;text-indent: -999em;}

I read what you said and found this website to help me out:

https://www.feedthebot.com/pagespeed/combine-images-css-sprites.html

Thank you for all your help.

Oh wow, you did an excellent job on that sprite! That article you linked explains things better than I did.