css3 dynamic background image url

Question

I am attempting to lighten the weight of my CSS files, and have a question. It is a bit difficult to explain, so in an attempt to simplify the question a bit, imagine this (fictitious) scenario.

Imagine I owned an electrical shop, and sold TV's, Radios and DVD players. Furthermore, I only sold items made by Panasonic, Sony, Samsung and NEC.

Each of the four manufacturers has it's own image, and each of the three electrical items showed the image with different crops, aspect ratio etc. (Point being, i cannot use the same image across different products, just rescaled. They are separate images)

So far, my css for my product website looks like this

/* TVs */
a.tv.panasonic { background:url('/images/television/panasonic.jpg'); }
a.tv.sony      { background:url('/images/television/sony.jpg'); }
a.tv.samsung   { background:url('/images/television/samsung.jpg'); }
a.tv.nec       { background:url('/images/television/nec.jpg'); }

/* Radios */
a.radio.panasonic { background:url('/images/radio/panasonic.jpg');}
a.radio.sony      { background:url('/images/radio/sony.jpg');}
a.radio.samsung   { background:url('/images/radio/samsung.jpg');}
a.radio.nec       { background:url('/images/radio/nec.jpg');}

/* DVD Players */
a.dvd.panasonic { background:url('/images/dvd/panasonic.jpg');}
a.dvd.sony      { background:url('/images/dvd/sony.jpg');}
a.dvd.samsung   { background:url('/images/dvd/samsung.jpg');}
a.dvd.nec       { background:url('/images/dvd/nec.jpg');}

This is just twelve styles and is not a big deal, but in reality, we have about 12 different "products" and about 80 different "manufacturers", which is really hard to manage, especially considering the "manufacturer" image will change frequently. Additionally, I don't have a server side language at my disposal.

Therefore, my question is this. Is it possible to merge image URL's from two rules? For example, can I do something like the following:

a.tv    { background:url('/images/television'); }
a.radio { background:url('/images/radio'); }
a.dvd   { background:url('/images/dvd); }

a.panasonic { background:url( background + '/panasonic.jpg'); }
a.sony      { background:url( background + '/sony.jpg'); }
a.samsung   { background:url( background + '/samsung.jpg'); }
a.nec       { background:url( background + '/nec.jpg'); }

That way, every time we get a new "manufacturer/product" or the image for a manufacturer changes, I only need to edit/amend one line

Thanks

I know you don't have server-side capabilities, but can you use Javascript/jQuery? This would be pretty simple to do with jQuery — Dryden Long
– Dryden Long, Commented Mar 28, 2014 at 16:14
Only using a CSS pre-processor, like SASS. However, if you've got that many options, do yourself a favor and don't add rules to a stylesheet, add the background image using an inline-style, that will seriously lighten up your stylesheets. Even a preprocessor will just make the syntax easier to manage, the final weight of the .css stylesheet will be no different. — Adam Jenkins
– Adam Jenkins, Commented Mar 28, 2014 at 16:15
I'm not sure your product images should be in the CSS at all. They are content and thus should be inline HTML as ing tags. — Paulie_D
– Paulie_D, Commented Mar 28, 2014 at 16:44
I did consider jQuery, but on a heavy page with lots of links, it slows the page load considerably, particularly in IE8. @Paulie_D, the "product/manufacturer" scenario is not actually my situation. I just used that analogy to simplify my requirement. (it took me three attempts to detail my actual situation, and I eventually gave up!). In fact, the images are more about corporate brand than product images. They are subtle backgrounds to links etc. Normally, I would agree though, product images should not be part of CSS. — BobbyP
– BobbyP, Commented Mar 29, 2014 at 11:26

robbclarke · Accepted Answer · 2014-03-28 16:17:54Z

6

You could control it with jQuery

HTML

<a href="#" data-type="radio" data-brand="panasonic" class="brand-image"></a>

jQuery

$('.brand-image').each(function(){
    var type = $(this).attr('data-type');
    var brand = $(this).attr('data-brand');

    $(this).css('background-image', 'url(images/' + type + '/' + brand + '.jpg)');
});

On each of the anchors that you want to change you can add a class to indicate to jQuery to run the function on that anchor. In those anchors, using data-type and data-brand you'd specify the type and brand for that image. When the function runs it will apply the background image to that anchor based on the data that you've provided.

answered Mar 28, 2014 at 16:17

robbclarke

7493 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrPk · Accepted Answer · 2014-03-28 16:32:20Z

4

You need something like SASS BUT, if you don't have "kb" problem, you can use smart background.

IDEA: Each manifacturer has his own background. This image cointains ALL the backgrounds for every products of this manifacturers.

Each product has a class. Each class has a background-position property setting x pos and y pos of the "inner - image".

So basically you'll have:

.panasonic {
   background-image: url('myurl_panasonic');
   background-position: 0px 0px;
}

.sony{
   background-image: url('myurl_sony');
   background-position: 0px 0px;
}

.tv {
  background-position: 0px 120px !important;
}

.dvd {
  background-position: 0px -500px !important;
}

.mpplayer {
  background-position: 50px 720px !important;
}

and a div will be like this:

<div class="sony dvd"></div>

This is the trick to have an unique background image that fill the active status like "hover" and "focus" that works well everytime because a single image it's loaded so when you change status of a button client just change the starting coordinate of the image without load another image. However if the background images are heavy and large you'll risk to have a megabyte jpg to load!

answered Mar 28, 2014 at 16:32

MrPk

2,9502 gold badges22 silver badges26 bronze badges

1 Comment

BobbyP Over a year ago

I like this idea. Easy to maintain, and pure CSS. Thanks

the_marcelo_r · Accepted Answer · 2014-03-28 16:18:03Z

0

I'm not aware of any method to dynamically append values to a style code purely with CSS.

So, my suggestion would be to use JQuery, take a look at some of its functions: http://api.jquery.com/css/ http://api.jquery.com/addclass/

answered Mar 28, 2014 at 16:18

the_marcelo_r

1,85623 silver badges36 bronze badges

Collectives™ on Stack Overflow

css3 dynamic background image url

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related