CODEWITHSUNDEEP
cssbackground-image
BobbyP
BobbyP

Reputation: 2245

css3 dynamic background image url

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

Upvotes: 3

Views: 28614

Answers (3)

MrPk
MrPk

Reputation: 2930

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!

Upvotes: 4

the_marcelo_r
the_marcelo_r

Reputation: 1856

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/

Upvotes: 0

robbclarke
robbclarke

Reputation: 749

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.

Upvotes: 6

Related Questions