Is it possible to utilize attr() in order to set the background image? background-image:url(attr(src));

Is there a way to extract the src attribute value from an HTML file and store it in a variable in a css/scss file so I can easily use it in the url() property like this:

<style>
     img[src]{
        background-image:url(attr(src));
        }
    </style>
    

Instead of coding each individual image, I want to automatically grab their src value, insert it into the url property, and set it as the background image.

-

I've tried a few methods, such as using custom properties, but nothing seems to work. Is there a solution to achieve this or something similar?

Thank you

Answer №1

Sorry, but in order to access and utilize the value attribute, javascript is required

Here is a potential example using a css var(--var) for easy reuse:

let images = document.querySelectorAll('body img');
[...images].forEach((image) => {
  image.setAttribute("style", "--bg: url(" + image.getAttribute('title') + ");");
});
img {
  padding: 5em;
  background:  var(--bg) 0 0 / cover ;
  box-shadow: inset 0 0 5em;
}
<img src="https://picsum.photos/id/1020/200/300" title="https://picsum.photos/id/1020/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1015/200/300" title="https://picsum.photos/id/1015/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1050/200/300" title="https://picsum.photos/id/1050/200/300">

Continue testing until the entire table is green at https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing grid for JavaScript positioning on the website:

Hey there! I have a bunch of javascript files that I want to incorporate into my site using CSS grid. I have the code ready, but I'm a bit confused: Where exactly should I add the columns and rows in the .box-1 class to change its position? Addition ...

The sidebar made an unexpected leap from one side to the other, with no memory of ever tampering

I'm feeling a bit overwhelmed because I can't seem to figure this out. My goal is to create a basic page layout with a header, subheader, sidebar, content pane, and footer. Everything was going smoothly until I started writing a function in my J ...

Button with small width containing an icon and text

I am trying to create a simple HTML button that has an icon on top and a description below it. <div class="mybtn"> <div><img src="someimage.png"></div> <div>Button description</div> </div> My question is, ...

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

The screen reader seems to be malfunctioning as soon as I include this particular code

//Finding the height of the header let headerHeight = document.querySelector('header'); let height = headerHeight.offsetHeight; //Adjusting the #navbarNav's top margin to accommodate the header let nn = docu ...

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Here is an example of my ajax call: function insertModal(link) { $.ajax({ url: link, cache: false, dataType: "text", success: function(data) { $("#modalInput").html(data); }, error: function (request, status, error) { ...

Is the ng bootstrap modal within Angular failing to show up on the screen

In the midst of working on my project, I encountered an issue with opening a modal using ng bootstrap. Although I found a similar thread discussing this problem, it did not include bootstrap css. I decided to reference this example in hopes of resolving t ...

Encountering a connection issue: SMTP connect() failure when using PHPmailer with reCaptcha on a CentOS server

My company is looking to set up a website on a CentOS server that includes a contact form with captcha. I came across PHPMailer and got the code working on my local machine, but when trying to send emails on CentOS, I encountered an error saying "SMTP conn ...

Increase jQuery value by X each time it is clicked

I'm trying to create a custom next/prev navigation where clicking the "next" button will animate the margin left by X on each click until reaching the end (-320px), with a similar method for the back button. Here is the JavaScript code I've been ...

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

Google Chrome has trouble displaying the body element at 100% height

Having an issue with Google Chrome – the body element is not reaching 100% height. In my website samples, at 100% zoom when hovering over a menu element (such as "O nás"), I change the background color of the body element. However, in Chrome, the botto ...

Is there a way to align this button perfectly with the textboxes?

https://i.sstatic.net/ODkgE.png Is there a way to align the left side of the button with the textboxes in my form? I'm using bootstrap 3 for this. Here is the HTML code for my form. I can provide the CSS if needed. Thanks. h1 { font-size:83px; ...

Implement a CSS class specifically for products with low stock within the single product page on WooCommerce

I need some assistance with adding a class to 'Low stock' in the code snippet below, as I am not very familiar with php. My goal is to style the Low Stock text in WooCommerce to appear orange using CSS. function change_stock_text( $availability ...

Aligning text vertically in the center using Bootstrap

How can I center text vertically within a division with a height of 100vh? Here's what I've tried: .about-header { height: 100vh; background: #000; } .about-header p { font-size: 5em; } <link rel="stylesheet" href="https://maxcdn.boot ...

Find the element that is being scrolled in order to delete its attributes

Issue with the sidebar causing whitespace on mobile devices, and scroll properties need to be removed. When expanding the sidebar, white space appears below it. Various display modes have been tried, but they all push elements below instead of keeping th ...

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

Tips for building a carousel-style transition using React Router

I am looking to implement a carousel animation in my React Router. My website has pages named A, B, C, and D. When transitioning from page A to B, I want the animation to move from right to left. When going from B to A, I want it to move from left to rig ...

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

How can I extract a specific portion of HTML content using C#?

I am working on a page where I need to extract a substring using the following code: static string GetBetween(string message, string start, string end) { int startIndex = message.IndexOf(start) + start.Length; int stopIndex ...

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

When working with Bootstrap 4, I encountered an issue where changing the block position from relative to fixed using a script caused the block to decrease in size. The script I used includes a .sticky class: .sticky { position: fixed !important; top: ...