How to have dynamic image as CSS background?

Question

I have a logo div that I want to use my logo image as the background for, such as:

.logo {
    background: #FFF url(images/logo.jpg);
}

However, on a settings page in my script, I would like to have a text input field to specify what the image URL is for the background image.

How can I set the background image for this div as the inputted image URL without having to do:

<div><img src="/images/logo.jpg" /></div>

(The script is written in PHP)

Does it have to be persistent? Can it be done with javascript/jquery or does it have to be done with php? — chrisgooley, Jul 03 '12 at 03:03

Nathan · Accepted Answer · 2018-08-21T20:28:15.063

34

Here are two options to dynamically set a background image.

Put an embedded stylesheet in the document's <head>:

<style type="text/css">
.logo {
   background: #FFF url(<?php echo $variable_holding_img_url; ?>);
}
</style>

Define the background-image CSS property inline:

<div style="background-image: url(<?php echo $varable_holding_img_url; ?>);">...</div>

Note: Make sure to sanitize your input, before saving it to the database (see Bobby Tables). Make sure it does not contain HTML or anything else, only valid URL characters, escape quotes, etc. If this isn't done, an attacker could inject code into the page:

"> <script src="http://example.com/xss-attack.js"></script> <!--

edited Aug 21 '18 at 20:28

answered Jul 03 '12 at 03:41

Nathan

11,814
11
50
93

But isn't it best to use CSS files for cache and site speed? I thought inline styles were bad. – Jordan Carter Feb 17 '18 at 03:31
1

@JordanCarter Yes, CSS files are best for caching and site speed. But you probably wouldn't really want this part cached, as the background URL is a variable and thus can/will change. In this case I think embedded styles is fine, so long as the entire stylesheet isn't embedded in the webpage. – Nathan Feb 17 '18 at 05:53

score 6 · Answer 2 · answered Jul 03 '12 at 03:39

<input type="text" class="inputContent" />
<script type="text/javascript">
    var inputC = $('input.inputContent').val();
    $('body').css('background', 'url(' + inputC + ')');
</script>

That's entirely js and jQuery, because I don't know PHP, but it's a solution!

score 3 · Answer 3 · answered Jul 03 '12 at 03:06

3

You either need to generate the css from a PHP script (somewhat advanced), or use inline styles to do the trick. Ex:

<div style="background-image: <?php echo $_POST['whateverjpg']; ?>" >
//blah
</div>

This is incredibly insecure, but the most concise answer I can give..

answered Jul 03 '12 at 03:06

James L.

4,032
1
15
15

1

PHP injection. Just escape your data. – James L. Jul 03 '12 at 03:29
Oh, yeah... anyone that doesn't escape their user-inputted data (and database inputs, which is most likely what the URL to this image will be stored in) should educate themselves about [Bobby Tables](http://bobby-tables.com/). – Nathan Jul 03 '12 at 03:35

score 2 · Answer 4 · answered Jul 03 '12 at 03:02

I think you can set the background image dynamically using javascript as given here.

document.getElementById("xyz").style.backgroundImage="your path";

If you prefer not to use javascript, why can't you use inline style attribute.
ex

<div style="background-image: url(xyz)"></div>

How to have dynamic image as CSS background?

4 Answers4

Linked