utilize a variable to insert the image URL into CSS styling

When I retrieve a product image URL from my database, I apply CSS styling to it on the front-end page. However, I need to dynamically pass the product image URL into the CSS that specifies the background image...

Here is my current CSS:

.product-image .bg{
  background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dHNoaXJ0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60');
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 450px;
}

This is how the product page displays the background image:

<div class="product group">
<div class="col-1-2 product-image">

By placing "product-image" in the div, the product image is rendered. How can I dynamically insert this URL <%= data[I].IMAGE_URL %> into the CSS? So instead of having ->

background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dHNoaXJ0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60');
->

I want to have 

background-image: url('<%= data[I].IMAGE_URL');

Is achieving this possible?

javascripthtmlcssnode.jsejs

Answer №1

Yes, absolutely possible. By incorporating this into an .aspx file or any server-rendered page, you'll be all set. Just make sure to switch from using single quotes to double quotes.

product-image .bg {
    background-image: url("<%=someImageURL%>");
    background-size: cover;
    background-position: center top;
    width: 100%;
    min-height: 450px;
}

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

Issues with image uploads in Node.js database storage

Trying to update an image using the put method is resulting in a 'filename' undefined error. Interestingly, the image updates successfully when editing without changing the image. The code snippet below shows the implementation: app.put('/a ...

javascriptnode.jsexpressecmascript-6mono

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

javascripthtmljquerycss

Angularjs app unable to retrieve data after deployment

Currently, I am working on a local server developing an AngularJS app on localhost. I have shared the project link with my colleagues using my current IP address within the network to receive feedback. However, when they visit the page, no data is displaye ...

javascriptangularjsserviceweb-deploymentfactory

Passing a ref from a parent component to a child component in reactjs

I have the following situation, how can I make sure that the attachment field in the child component is accessible from the parent component? class ServiceDeskCustomerCreate extends Component { constructor(props, context) { super(props, context); ...

javascriptreactjs

What is causing the malfunction with this JQuery/AJAX request?

Currently in the process of setting up an autocomplete feature. Following the guidance from php academy at the moment. My goal is to display "suggestions go here" below the input field whenever something is typed in. I have two files for this task: home.ph ...

phpjavascriptjqueryajax

having difficulty implementing a horizontal scrollbar on my chart

Currently, I am in the process of utilizing angularjs google charts for my project. Specifically, I have integrated an angularjs google column chart to visually represent data using columns. However, a recurring issue arises when there is an abundance of d ...

javascripthtmlangularjs

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

javascripthtmlarraysangulartypescript

Dealing with numerous https requests within a node.js application

I've been searching around on SO for assistance with this issue, but I seem to be going in circles without making any progress. My current project involves making multiple ReST POST requests using node.js https. I need to keep track of the responses ...

javascriptnode.jsrequest

Utilizing database information for interactive objects in Three.js: A step-by-step guide

I need to display specific text data for each object based on database entries in my project. However, despite creating a cube for each entry in the database, I'm encountering issues with undefined data. It seems like my code should work, but it' ...

javascriptjsonthree.jsdata-visualization

After installing body-parser, why is req.body still undefined in Express.js?

I have set up body parser in my controllers file, but I am still facing an issue where req.body is undefined. Here is a snippet of my code: const express = require("express"); const app = express(); let bodyParser = require("body-parser" ...

node.jsexpresspostman

Transferring information between two Vue components using a variable declared in the main JavaScript file

In my project, I am working with two separate Vue files - let's say 1.vue and 2.vue - along with a main JS file. Within my main.js file, there is a variable xyz under the window.App data method. I am looking to utilize this variable as a shared data ...

javascriptvue.js

Discovering the clicked button in a partial view during an onSuccess Ajax call

Within my partial view, I have implemented two buttons: Save and Preview. Both buttons are functioning as expected, with Preview enabling widget preview and Save saving data to the database. However, I am encountering two issues: I am unable to determine ...

javascriptjsonasp.net-mvcasp.net-ajaxajax.beginform

Node.js is having trouble locating a module that has been installed

Upon transferring my node.js application to a different PC (where it functioned flawlessly on the development machine) and manually installing all the necessary dependencies, I encountered an error when attempting to run it: C:\Users\myself>n ...

javascriptnode.jsnpm

What is the best way to retain data when a Vue page is about to close?

As far as my understanding goes, it seems that closing or refreshing a page does not trigger the 'beforedestroy' and 'destroyed' hooks in Vue. In order to work around this issue, one possible solution could be to utilize the following ...

javascriptvue.jsvuejs2

Stop the rendering of angular attribute directives within the template

When I add some conditional classes and attribute bindings in the template, Angular retains those attribute directives in the DOM, as seen in the developer tools: <input type="radio" name="gender" ng-model="lsmodal.data.profile.gender" value="male" ng- ...

javascriptangularjsangular-directiveangular-template

Is there a constraint on JSON data?

Is there a limit to the amount of data that JSON with AJAX can handle in outgoing and returning parameters? I am trying to send and receive a file with 10,000 lines as a string from the server. How can I accomplish this task? Can a single parameter manage ...

phpjavascriptajaxjson

Exploring Flexbox Grid on Safari and Chrome

I have encountered an issue while trying to implement a grid using flexbox and sass. It seems to be functioning smoothly on Chrome, but I am facing some problems with Safari. The red boxes are "overflowed" and do not break to a new line as expected. An im ...

csssafariflexboxsaas

Obtaining the employee roster based on mat-radio-button selection [active / inactive / all]

On my dashboard, I have a list of employees including both active and inactive ones. I want to display only the list of active employees by default. If I click on the Inactive radio button, it should switch to displaying only the inactive list. Selecting ...

node.jsasp.net-web-apiangular-materialangular7

Secured Path Utilizing Firebase

I have integrated Firebase for User Authentication in my Next.js Application and I am looking to enhance security on the client-side. Utilizing firebaseui react-firebaseUI, I have successfully implemented Google Auth. How can I ensure that a specific Route ...

node.jsreactjsfirebase-authenticationnext.jsfirebaseui

Using JavaScript to print radio type buttons

Currently working on a web page and I've encountered a problem that's got me stumped. There are two sets of radio buttons - the first set for package dimensions and the second set for weight. The values from these buttons are assigned to variable ...

javascripthtmlcss