Dynamic CSS Background URLs

Question

Consider this CSS Property:

background: url(http://images.something.com/background.png) left top repeat-x;

Is there a way to dynamically specify the URL being used in the external file (Meaning the URL is sort of automatically generated rather than hard-coded in the CSS file) ?

Thanks.

Do you want your host to be dynamic (in your case http://images.something.com/) or the image name? IMO, I dont think the image name can be dynamic — Starx
– Starx, Commented Jun 17, 2010 at 7:28

Community · Accepted Answer · 2017-05-23 12:14:20Z

3

Dynamic CSS Background URLs

There is another cool trick.

You could add a

.php

to the file's name so it will be Hypertext Preprocessed next time, someone calls it.

Now you can easily do (in your CSS file):

<?php $num = rand(1, 3); ?>

background: url(http://images.something.com/background<?php echo $num; ?>.png) left top repeat-x;

This will switch randomly the background-image between

background1.png, background2.png and background3.png

P.S. Dont forget to update your <link> to your css.php file.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 31, 2011 at 22:30

GregorVolkmann

1302 silver badges14 bronze badges

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

Comments

Anthony · Accepted Answer · 2010-06-17 06:01:36Z

2

background: url(http://images.something.com/getimage.html?image=random) left top repeat-x;

And in the getimage.html, check if request[image] == "random". Using whatever server-side language you desire, respond with an arbitrarily or randomly selected image.

answered Jun 17, 2010 at 6:01

Anthony

12.5k10 gold badges72 silver badges107 bronze badges

4 Comments

mpen Over a year ago

It'd probably get getimage.php but, whatever :P Your logic is right.

Mike Tierney Over a year ago

This works if you're setting a random (in this example), but if you want an image that's produced based on the context of the page? Your options there are pretty much limited to some manner of scripting language (either client- or server-side) to load a more specific image.

Anthony Over a year ago

@Mark: Yeah, I know. I figured I'd make it language agnostic though. It could also be getimage.aspx or something else.

500ml Over a year ago

Thanks for the answer but it's not what I'm looking for. What I want is to dynamically specify the URL itself so I won't be bothered changing URLs in the css file every time I work locally or when I will transfer to another domain. Am I making sense here? Thanks.

Kerry Jones · Accepted Answer · 2010-06-17 05:57:19Z

0

Yes.

You can call a server-side page, and based on variables, it can put in different CSS there.

If you just mean with html/css -- there is very little you can do dynamically.

answered Jun 17, 2010 at 5:57

Kerry Jones

21.8k12 gold badges67 silver badges89 bronze badges

Comments

Mike Tierney · Accepted Answer · 2010-06-17 06:00:08Z

0

You can also set background images using Javascript (there are a large quantity of possibilities), but HTML and CSS are, by nature, static languages.

answered Jun 17, 2010 at 6:00

Mike Tierney

1111 silver badge4 bronze badges

Collectives™ on Stack Overflow

Dynamic CSS Background URLs

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related