CSS set background-image by data-image attr

by

a nice alternative to data- attributes (or the attr() approach in general) can be the use of custom properties (MDN, csswg, css-tricks).

as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!

also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}
<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>

More Related Contents:

  1. When to use IMG vs. CSS background-image?
  2. Fill SVG path element with a background-image
  3. Can I set an opacity only to the background image of a div?
  4. CSS Display an Image Resized and Cropped
  5. Fit background image to div
  6. Fullscreen responsive background image in CSS
  7. CSS: stretching background image to 100% width and height of screen?
  8. How to change SVG color when it is an encoded CSS background image?
  9. How to add a background image on top of a previous background image?
  10. How to completely remove borders from HTML table
  11. How do I stretch a background image to cover the entire HTML element?
  12. Can I use an image from my local file system as background in HTML? [duplicate]
  13. How can i change the icon color to some other color in CSS?
  14. Unable to scroll on website
  15. Why not use tables for layout in HTML? [closed]
  16. CSS margin terror; Margin adds space outside parent element [duplicate]
  17. How can I position my div at the bottom of its container?
  18. Make CSS Hover state remain after “unhovering”
  19. How do I not underline an element in a link?
  20. How create table only using tag and Css
  21. How can I display the checkbox over the images for selection?
  22. Should I size a textarea with CSS width / height or HTML cols / rows attributes?
  23. CSS filter:invert not working with background-color
  24. CSS position absolute and full width problem
  25. Size of font in CSS with slash
  26. Allow Access-Control-Allow-Origin header using HTML5 fetch API
  27. How do I change the font-size of an element within ?
  28. Ticks for type=”range” HTML input
  29. How do I horizontally center an absolute positioned element inside a 100% width div? [duplicate]
  30. Can you have a within a ?

Leave a Comment