Create background-image url from existing part of HTML

paulzz3000

Member
Local time
02:58
Joined
Oct 24, 2019
Messages
7

Gummibeer

Astroneer
Moderator
Local time
03:58
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

Drop the CSS idea and use your template engine to generate an image tag with a srcset with an optional sizes attribute.


I could also recommend https://www.imgix.com/ as the SDKs can generate the srcset automatically for you without any configuration and you also can use the <picture> tag with altered <source> tags for different image formats like webp .

 

paulzz3000

Member
Local time
02:58
Joined
Oct 24, 2019
Messages
7

Thanks Gummibeer but that won't work for background images.
I'm using Sirv to handle the image sizes which, like IMGIX, handles the sizes/format bits well.
As I have thousands of pages, each needing it's own bg, it needs to be inserted dynamically.
Unless I'm missing a trick somewhere.

 

Gummibeer

Astroneer
Moderator
Local time
03:58
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

HTML:
<div style="position: relative;">
    <img src="" style="" style="position:absolute;top:0;bottom:0;left:0;right:0;object-fit:cover;"/>
    {{ content }}
</div>

This should get you pretty near (possibly some fine-tuning).

Using a real background image would only work with JS. 😟

 

Adam

Mr. Webwide
Administrator
Local time
02:58
Joined
Sep 24, 2019
Messages
1,252
Pronouns
he/him

What about something like... I am sure it can be improved if it works at all!

HTML:
<div id="whatever" data-src="https://cdn.mydomain.com/CRLS0004/CRLS0004.png">

<script>
    var whatever = document.getElementById('whatever');
    whatever = whatever.getAttribute('data-src');

    if (window.matchMedia("(max-width: 700px)")) {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=768&scale.height=480")';
    }
    else if (window.matchMedia("(max-width: 1400px)")) {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=1140&scale.height=768")';
    }
    else {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=1920&scale.height=1080")';
    }
</script>

 
Last edited:

paulzz3000

Member
Local time
02:58
Joined
Oct 24, 2019
Messages
7

HTML:
<div style="position: relative;">
    <img src="" style="" style="position:absolute;top:0;bottom:0;left:0;right:0;object-fit:cover;"/>
    {{ content }}
</div>

This should get you pretty near (possibly some fine-tuning).

Using a real background image would only work with JS. 😟

That might work. Thank you!

 

paulzz3000

Member
Local time
02:58
Joined
Oct 24, 2019
Messages
7

What about something like... I am sure it can be improved if it works at all!

HTML:
<div id="whatever" data-src="https://cdn.mydomain.com/CRLS0004/CRLS0004.png">

<script>
    var whatever = document.getElementById('whatever');
    whatever = whatever.getAttribute('data-src');

    if (window.matchMedia("(max-width: 700px)")) {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=768&scale.height=480")';
    }
    else if (window.matchMedia("(max-width: 1400px)")) {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=1140&scale.height=768")';
    }
    else {
        document.body.style.backgroundImage = 'url("' + whatever + '?scale.width=1920&scale.height=1080")';
    }
</script>
That looks interesting, thank you.

 

Gummibeer

Astroneer
Moderator
Local time
03:58
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

Some reasons against the JS approach, or any other JS solution:

  • There's no fallback, so blank background without JS - yes there are still users disabling JS
  • Extra bandwith for the JS
  • Delay in image load as computation in JS is required
  • No accessibility - is it only a pattern image or does it contain content and should get an alt etc?
  • Algorithm for some images instead of one solution for everything

 

Adam

Mr. Webwide
Administrator
Local time
02:58
Joined
Sep 24, 2019
Messages
1,252
Pronouns
he/him

Some reasons against the JS approach, or any other JS solution:
  • There's no fallback, so blank background without JS - yes there are still users disabling JS
  • Extra bandwith for the JS
  • Delay in image load as computation in JS is required
  • No accessibility - is it only a pattern image or does it contain content and should get an alt etc?
  • Algorithm for some images instead of one solution for everything
I agree in general but depending on the circumstances, some counters:
  • The very small minority of people without JS support would probably be served fine with a well contrasted colour if it is a decorative background image
  • Background images should not be important content, in OP's example they used the body background which almost certainly wouldn't contain "real" content for accessibility purposes
  • Extra bandwidth in the JS is made up for with the possibility to use media queries to serve smaller more optimised images which may not be possible via HTML srcset if there is little/no control over HTML output in a CMS, for example
That being said, a HTML/CSS option definitely preferable if possible! 😊

 
Last edited:
Top