Title: Css from link Last modified: August 21, 2016 --- # Css from link * Resolved [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/) * Hello, * I know nothing about CSS but I know enough html to try to understand what I’m doing but I would like a little help. I am trying to edit a CSS stylesheet that has been created for my company. The following code is part of what I have. The problem I am having is that I do not have access to the url that is below. * `li.Facebook a {background: url(images/facebook.png) 0px 0px no-repeat;text-indent:- 999em;}` * If I wanted to use my own image, how would I go about doing that. What I tried was: * `li.Facebook a {background: url("http://www.Domain.com/images") 0px 0px no-repeat; text-indent: -999em;}` * This, however, is not working for me. Viewing 9 replies - 1 through 9 (of 9 total) * [Odai Athamneh](https://wordpress.org/support/users/heyodai/) * (@heyodai) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287235) * 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. * Thread Starter [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287305) * 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(http://Domain.com/wp-content/uploads/2013/ 11/pinterest_badge_red.png) 0px 0px no-repeat;text-indent: -999em;margin-right: 0 !important}` * [Odai Athamneh](https://wordpress.org/support/users/heyodai/) * (@heyodai) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287316) * 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('http:// 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. * Thread Starter [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287319) * 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('http://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. * [Odai Athamneh](https://wordpress.org/support/users/heyodai/) * (@heyodai) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287325) * 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('http://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](http://adaclubs.org/wp-content/uploads/2013/11/pinterest_badge_red.png), and the [YouTube logo they’re using](http://adaclubs.org/wp-content/themes/bgc/images/youtube.png). * 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. * Thread Starter [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287326) * 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? * Thread Starter [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287332) * 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;}` * Thread Starter [kgrrtt2004](https://wordpress.org/support/users/kgrrtt2004/) * (@kgrrtt2004) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287363) * I read what you said and found this website to help me out: * [http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html](http://www.feedthebot.com/pagespeed/combine-images-css-sprites.html) * Thank you for all your help. * [Odai Athamneh](https://wordpress.org/support/users/heyodai/) * (@heyodai) * [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287364) * Oh wow, you did an excellent job on that sprite! That article you linked explains things better than I did. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Css from link’ is closed to new replies. * 9 replies * 2 participants * Last reply from: [Odai Athamneh](https://wordpress.org/support/users/heyodai/) * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/css-from-link/#post-4287364) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics