CSS Selector based on background-image

erosmanerosman
edited April 2014 in Style Development
Hi everybody

I got curios about writing a CSS rule that is based on the background-image

I want to selected the property if it is a gif

Generic selector: a[href$=".gif"]

I want to apply it to background-image.. I have tried a few variation but havent been able to get it right.

body[background-image$=".gif"] body.style[background-image$=".gif"] body[backgroundImage$=".gif"]


Any ideas?
Thanks in advance
:)

Comments

  • freecyberfreecyber
    The css attribute selector you are trying to use only works with HTML attributes (seen in the left pane in Chrome inspector and Firefox built-in inspector, and DOM node pane of Firefox DOM Inspector.

    background-image is a css property. The only time you could use it in an attribute selector is if you have a web page with something like this HTML:
    <body style="background-image: url(example.gif);">
    style is an html attribute, you could use 
    body[style*=".gif"]{...}
    but it would be very unusual for background-image to be applied inline like this. If it is applied in a style element or stylesheet like this it won't work: 
    body{background-image: url(example.gif);}
  • erosmanerosman
    Thank you freecyber

    It is actually applied as an attribute of body (inline style) and not in the CSS

    I can easily get to it in a GM script (which I do) but I got curios to see if that is possible to do via style in Stylish.

    Thank you for
    body[style*=".gif"]{...}

    It didn't occur to me

    :)
  • LouCypherLouCypher
    edited April 2014
    CSS specificity won't work in this case since inline style is the highest specificity,
    so you must add !important rule in your CSS to override inline style of an element. 
    body[style*="example.gif"] {
      background-image: url(another.gif);
    }
  • erosmanerosman
    Thanks LouCypher

    Yes, I have added !important rule
    :)
  • lingmaakilingmaaki
    IE
    More about...CSS Image placing

    http://www.corelangs.com/css/text/image.html

    Ling


  • thankyouforallthefishthankyouforallthefish
    Firefox
    ^ adbot ?
Sign In or Register to comment.