Grow your CSS skills. Land your dream job.

Add url path with CSS

  • # March 5, 2012 at 11:39 am

    Google has failed me with this so here it goes :)

    Is it possible to add a URL path to a image through CSS only? I can’t change the HTML as it would break future updates to the page….

    # March 5, 2012 at 12:39 pm

    If I understand you correctly, no. You could do it with a background in your css, though, like this:

    background:("path/to/image.jpg") no-repeat;

    Could you clarify what you want?

    # March 5, 2012 at 2:10 pm

    Yes it is.


    p {
    content:url(your.gif);
    }

    That will set the content of all p tags to “your.gif” Just use a class or id selector to specify where to replace.

    # March 5, 2012 at 2:17 pm

    Let’s see if this is a bit more clear, in regards to what I am asking.

    HTML:

     
    
    	
    # March 5, 2012 at 2:20 pm

    The content selector should only be used with before or after and in any case he wants it to work on a image…not apply an image,

    # March 5, 2012 at 3:05 pm

    You cannot pass HTML in a CSS document it’s simply not possible. Your best bet is to consider looking at Javascript but of course you would need to edit the HTML header to include a JS script.

    # March 5, 2012 at 4:11 pm

    True and content without before or after doesn’t work in FF or IE, but will in Chrome or Safari.

    But this is easy to bypass. Just put an empty span inside a div and set the image after the span.

    Like this

    But again, this isn’t changing the html. So if you already have that img in your file you’ll need some js added to the head to change it. and if that img doesn’t have an ID or class unique to itself it will be difficult to select only that img.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Projects

*May or may not contain any actual "CSS" or "Tricks".