Transferring HTML variables to CSS

I've been searching for an answer without much luck. Is it possible to transfer variables from HTML to CSS, maybe using data attributes?

I want to display different backgrounds based on vendors using media queries on brand pages. I know inline CSS doesn't support media queries and creating numerous media queries in my stylesheet isn't ideal.

I have access to the vendor background URL object on my HTML page. It would be ideal if I could pass this information to a single CSS media query without utilizing JavaScript.

csssassshopify

Answer №1

To achieve this, you can utilize CSS variables (as far as I know, there is no other method).

For more information on CSS custom properties, you can refer to this link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

The process would involve the following steps:

  • Assign a CSS variable to your HTML tag: 
    <html style="--variable:'your_fallback_image.jpg'">
  • Dynamically populate the variable with the URL
  • Write CSS code within a media query to set the background image

Here is an example:

@media screen and (width:64rem){
  background-image: url(--variable);
}

By following these steps, the background image should update automatically when the URL changes, with a default image set in case the dynamic solution fails. I hope this explanation helps you.

Answer №2

CSS doesn't directly receive HTML input. Liquid transforms your theme into a cohesive HTML structure, allowing you to manipulate the CSS displayed to users through the product's vendor. You have the option to either predefine the necessary CSS styles or extract information from product metafields to dynamically adjust the styles. Essentially, by storing CSS as a metafield string, you can effectively customize the styles applied to your website.

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

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

htmlcssflexbox

Is there an alternative to using CSS units of measurement when using the .css() method?

Is there a way to use .scrollTop() and .css() to adjust the margins of an element so that it floats up only when the page is scrolled, but stops at a certain margin value? I want the element to float between specific values while scrolling. The issue I am ...

jquerycss

The header appears distorted on older versions of Internet Explorer, specifically IE 7 and IE

The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...

htmlcssinternet-explorerlayoutheader

Unable to center text within a CSS div rotated 90 degrees due to width limitations caused by rotation; solution involves utilizing flexbox

Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the cont ...

htmlcss

"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

In my Bootstrap 4 layout, I have set up two columns... The left column contains three cards in columns The right column has a list group The content in the list group is longer than that of the cards on the left side. Is there a way to make the height ...

htmlcsstwitter-bootstrapbootstrap-4

What CSS property prevents a fixed header from overlapping a scrolled element?

After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlayi ...

javascriptjqueryhtmlcss

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

Guide on how to turn off a checkbox "toggle switch" using JavaScript

Being relatively new to CSS and HTML, I recently experimented with creating a checkbox toggle switch using this resource. I now have a specific requirement to disable this toggle switch upon clicking a different button labeled 'Reset', making it ...

javascripthtmlcss

jQuery mobile : accessibility helper for hidden elements

Within my HTML structure: <div data-role="fieldcontain" id="containdiv" class="no-field-separator"> <label for="field1" class="ui-hidden-accessible">To</label> <input type="search" name="field1" id="field1" autocorrect="off" a ...

javascriptjqueryhtmlcssjquery-mobile

Instructions for making a vertical line using HTML

Currently, I am working on a design for a card that is similar to this one. What I'm trying to figure out is how to add a vertical line right underneath the circle just like in the image. ...

htmlcssbootstrap-4

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

Bootstrap failing to enclose columns that do not have a specified size

As I dive into creating a Bootstrap grid website to expand my knowledge, I am following the guidelines provided here. Trying to replicate the examples from that page has led me to the first hurdle. The issue arises when dealing with columns without specif ...

htmlcsstwitter-bootstrapbootstrap-4

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that ...

javascriptjqueryhtmlcss

Is there a way to determine if a div is positioned 100px from the bottom edge?

When using the sticky class to stick a div, I encountered an issue where it sticks correctly from the top but overlaps the footer at the bottom. https://i.sstatic.net/28A3A.jpg Here is the HTML code: <div class="tab-content"> <div role="tab ...

javascriptjquerycss

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> However, this is causing an err ...

cssdjangogoogle-app-engine

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

javascriptjqueryhtmlcssanimation

Excess padding in Internet Explorer 7 when a table is nested within a div tag

I have exhausted all potential solutions found on the internet and still cannot seem to solve this issue. Here is an example page that highlights the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l ...

htmlcssinternet-explorer-7