How can I use a data attribute to set a background-image in CSS?

by

This won’t be possible with pure css unless you’re doing it the “undynamic” way:

.slide[data-bg="one"]{
  background-image: url('img/one.jpg');
}
.slide[data-bg="two"]{
  background-image: url('img/two.jpg');
}
...

Maybe you can dynamically create that stylesheet from your filenames on server-side.

Another (likely easier) possibility is to do this with JavaScript – but since you excluded that I assume you know about that and just don’t want to use it.

More Related Contents:

  1. Select elements by attribute in CSS
  2. Using HTML data-attribute to set CSS background-image url
  3. What is the difference between display: inline and display: inline-block?
  4. CSS Floating Divs At Variable Heights [duplicate]
  5. CSS selector based on element text? [duplicate]
  6. CSS @font-face not working with Firefox, but working with Chrome and IE
  7. Opacity of background-color, but not the text [duplicate]
  8. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  9. Sass Variable in CSS calc() function
  10. Downloading a Google font and setting up an offline site that uses it
  11. How to style a div to be a responsive square? [duplicate]
  12. Background Image for Select (dropdown) does not work in Chrome
  13. How to change btn color in Bootstrap
  14. How to make a element expand or contract to its parent container?
  15. Defining Variable Variables using LESS CSS
  16. Webpack “OTS parsing error” loading fonts
  17. How can I zoom an HTML element in Firefox and Opera?
  18. difference between body and * in css
  19. Binding in Control with “class” Attribute
  20. SASS – use variables across multiple files
  21. Angular 2: How to style host element of the component?
  22. Bootstrap: Position of dropdown menu relative to navbar item
  23. iPhone X / 8 / 8 Plus CSS media queries
  24. How do you debug printable CSS?
  25. Twitter Bootstrap: div in container with 100% height
  26. How does hexadecimal color work?
  27. Are all CSS font-weight property’s values useful?
  28. CSS overlapping elements & opacity issue
  29. Media Queries – Mobile vs Desktop Browser
  30. Dynamically updating css in Angular 2

Leave a Comment