SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Change Image with CSS

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Image with CSS

    Hello

    I try change the image with this code css, but don't worked. Any suggestions?

    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain('sitepoint.com') {
    
    img[src*="forum_new-48.png"] {
    	background: url("http://imageshack.us/scaled/landing/94/k1x3pv.png") no-repeat !important;   
    }
    }
    Result:

    BRiC1.png

    Thanks!

  2. #2
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,437
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    Hi there,

    And welcome to the forums.

    What exactly is it you are trying to achieve here?
    The background property is shorthand property used to apply various background effects to an element, such as a <div>
    I'm not sure it really makes sense to apply a background image to an image.
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    And welcome to the forums.

    What exactly is it you are trying to achieve here?
    The background property is shorthand property used to apply various background effects to an element, such as a <div>
    I'm not sure it really makes sense to apply a background image to an image.
    I'm trying create a theme in offile mode. The solution for my question is:

    Code:
    img[src*="original_image"]{
        background-image: url("new_image") !important;
        background-repeat: no-repeat !important;    
        width:25px !important;
        display:inline-block !important;
        padding:25px 0 0 0 !important;
        height: 0px !important;
    }
    I have one more question, it is possible to add a button next to the 'quote'? Only with CSS offline mode. For create a theme


  4. #4
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,437
    Mentioned
    39 Post(s)
    Tagged
    1 Thread(s)
    Well, I'm glad you managed to find a solution to your original problem, but I still can't see any practical value to replacing one image with another in this way.
    Also, what's going on with the height:0px?

    Quote Originally Posted by Fantastic5 View Post
    I have one more question, it is possible to add a button next to the 'quote'? Only with CSS offline mode. For create a theme

    I wouldn't know how to add an element to a page using CSS.
    You can do this easily enough with JavaScript (or just in the HTML), but that doesn't deem to be what you're asking.

    Can anyone else shed any light??
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to put the image, but missing the link to picture.

    .postarea :before{
    content: url("link_here");
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •