How to Change CSS Dynamically

Question

I need my administrator to be able to change/update the banner of my site.

This is the banner code

<div class="containertop">This depends on the background of the div</div>

and this is the CSS for that

.containertop
{
     width:1000px;
     height:300px;  
     **background:url(../images/1.png) no-repeat center;**
     margin: 0 auto;
     margin-top: 40px;
}

What I would like to happen is the same as a Facebook cover photo. When a new banner is uploaded, the CSS will be updated(something like that). But of course, the new banner must be fetched from the database.

So I am thinking that the CSS would become like this:

Fetch the saved banner source and then:

background:url(<?php echo $row['image']; ?>);

but can I do the PHP connection to database (include 'dbname.php') inside a CSS txt?

It would be easier to use inline css on the tag itself - move background:url(../images/1.png) no-repeat center; into the tag as a style element, then set that in PHP. No need for JS here. — Ben Parsons
– Ben Parsons, Commented Jul 13, 2012 at 14:06
how can i do that? are there any tutorial links you can recommend? — iheartLUHAN
– iheartLUHAN, Commented Jul 13, 2012 at 14:06

Denys Séguret · Accepted Answer · 2012-07-13 14:08:57Z

2

There's nothing preventing you to serve a css generated by PHP. That's even easy.

Simply start your php file like this :

<?php
header("Content-Type: text/css");

answered Jul 13, 2012 at 14:08

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

1 Comment

James Adam Over a year ago

Nice. Doing something like this had never occurred to me before. I need to peruse SO more often (throws in toolbox... wanders off in random direction).

Jack Albright · Accepted Answer · 2012-07-13 14:23:06Z

1

I agree with Ben. If you make a little embedded css section in your page, you could put the .containerTop css code there. Then, put your code in the page. So, in your actual web page, put this:

<style type="text/css">
.containertop{
width:1000px;
height:300px;  
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>

Of course, your background url will not update until it is reloaded. If you decide to do it this way, don't forget to take the .containerTop definition out of your existing css. Having said all that, I really like dystroy's answer. Very nice. I never thought of doing that.

edited Jul 13, 2012 at 14:23

answered Jul 13, 2012 at 14:17

Jack Albright

5093 silver badges11 bronze badges

Comments

Ajay Gupta · Accepted Answer · 2012-07-13 14:13:57Z

1

You can set containertop background while loading php file.

<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>

This will set the background fetched from db.

answered Jul 13, 2012 at 14:13

Ajay Gupta

761 silver badge8 bronze badges

Comments

Hadi · Accepted Answer · 2012-07-13 14:15:21Z

0

Well, You can use jQuery to change/overwrite the CSS file.

Example -

$('.containertop').css('backgroud','url(images/change.jpg) repeat');

or

$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');

answered Jul 13, 2012 at 14:15

Hadi

2,9051 gold badge27 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to Change CSS Dynamically

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related