How to Have Dynamic Image as CSS Background

How to have dynamic image as CSS background?

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> <!--

Responsive & Dynamic Background Image - best practice

Have you discovered the srcset attribute? What srcset does is it allows you to add more than one image in a <img> tag and set certain conditions to it. Depending on which condition is met, the corresponding image will be shown. Time for an example

If you want an image to be viewed half of the users viewport width you would use

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

What this does is it finds how large the users viewport width is, say its 500px wide, so your image images/space-needle.jpg 200w will load for the user.

In this example we specified that the image needs to take up half the screens width sizes="50vw". It would be impossible to show an image at 600px or 400px wide on a 500px wide screen and comfortably have it shown only at half the viewport so it chooses the 200w option.

There are many ways to specify conditions for which image should load, device pixel ratio, screen size, browser size so on and so forth.

Eduational links:

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

https://www.udacity.com/course/responsive-images--ud882

Angular dynamic background image in div

if you want use dynamically. Dont use this syntactic

<div class="thumb" style="background-image: url('https://www.abcd.com/+ post.image)"></div>

try do this

<div class="thumb" [ngStyle]="{'background-image': 'url(' + post.imageURL + ')'}" > <div>

Hope this will be helpful.

How to assign background-image url dynamically with only html and css?

Even if I feel like it would be much easier to do with simply using inline background-image property (especially if you want to concatenate url string). For simple use you can do that like that:

<div class="var" style="--url: url(https://picsum.photos/320/240)"></div>

.var {
  background-image: var(--url);
}

For reasons unclear for me, using url(var(--url)); doesn't seem to be working at all (at least at Chrome)

Dynamically set background image

You approach is correct but I would change something.

In the css I would make this:

.foo {
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 140px;
}

And in the HTML i would only keep the url.

<div class="foo" style="background:url(<?php echo $attribute; ?>);">

This way on the server-side it's easier to see where you have dynamic content. And you only need to change the url for the corresponding image.

So if later you work with another developer he knows exactly where he should change the images without going to your css.

Angular dynamic background images

Use instead

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>

<div [style.background]="'url(/img/' + item.img + ')'"
    [style.width.px]="200" [style.height.px]="150p"></div>

See also In RC.1 some styles can't be added using binding syntax

Dynamic background-image

The issue you have is that MVC will happily fix the relative paths inside an img src attribute but not for style. You should map that virtual path using Url.Content():

<div style="background-image:url('@Url.Content(item.picture)');">

making a background image dynamic and change every few seconds

Just set the style of the background element, its practically the same as your current solution:

There's a good solution for this on SO: [Changing background-image with JavaScript]

<div id="background" class="text-center background">

    <p>come content</p>
        
    <script type = "text/javascript">
        var background = document.getElementById("background");
        var currentPos = 0;
        var images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccerball.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            background.style.backgroundImage = "url(" + images[currentPos] + ")";
        }
        setInterval(changeimage, 3000);
    </script>

</div>

This solution is pure HTML Javascript, there are image carousel controls and component based solutions that will help if you want to run the timing logic on the server, but this javascript is a very simple solution to the problem.

How to Have Dynamic Image as CSS Background