8

I am using using the background-image attribute to assign images to a range of div on my site. However, with background-image attributes, I also need to assign background-size to get it looking right.

This works fine mostly, but I need to change the background-size attribute based on the file type used in the background-image attribute. For example, as standard I want to user background-size: cover; but when the background-image is an SVG I want to use background-size: auto;

Is this possible using CSS attribute selectors? If not, any other solution?

My attempt (SCSS):

&.bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px;
    max-height: 700px;
    &[src$=".svg"] { background-size: auto; }
}
dungey_140
  • 2,602
  • 7
  • 34
  • 68
  • Your code is actually supposed to work as expected. What is the problem? Could you set up a snippet or fiddle? – Tigran Oct 06 '16 at 10:59
  • You want to check the style attribute in css and add a rule. I don't think it's possible yet. This answer might help you http://stackoverflow.com/a/8426901/886539 – Simon Arnold Oct 06 '16 at 11:00
  • @Tigran I don't think it's targeting the background-image attribute, which is where the SVG is. It's not part of the img src? – dungey_140 Oct 06 '16 at 11:49

1 Answers1

12

If background-image is your only inline CSS property, you can do this:

.bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 300px;
    max-height: 700px;
}

.bg-image[style^="background-image:"][style$=".svg)"] {
  background-size: 103px 94px;
}
<div class="bg-image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg)"></div>

If background-imageis not the only property but it is the last one, you can use this selector: [style$=".svg)"].

Finally, the most general case, for any location of background-image in the style attribute use this selector: [style*=".svg)"].

Even with the loosest selector: [style*=".svg)"] (or jpg, or png...) the only declaration the selector can possibly apply is the background-image.

The other approach is to add data-type=svg or what have you to the divs and then target them in CSS [data-type=svg].

Or you could use img instead, as in your example.

Tigran
  • 2,800
  • 1
  • 19
  • 19
  • Turns out, I have another inline CSS element. Presumably this means your approach won't work? – dungey_140 Oct 10 '16 at 12:24
  • You can either move your other CSS rules to stylesheet or use just `[style$=".svg)"]` and make sure that background-image is at the end, or use `[style*=".svg)]"]`. After all even with `[style*=".svg)"]` (or jpg, or png...) the only declaration the selector can possibly apply is the background-image. – Tigran Oct 10 '16 at 19:14
  • Ah, seem to have it working now &[style*=".svg"] { background-size: auto; } Just a small tweak. Do you want to convert this to an answer and I can mark as accepted? Thanks for your help! – dungey_140 Oct 12 '16 at 09:12
  • You're welcome! I updated the answer to include the thoroughest list of available options and added a snippet. – Tigran Oct 12 '16 at 13:06