4

I would like to set a base domain with all of my pictures in CSS file, here's what I tried:

global.css

:root
{
  --bgd: #C0C0C0;
  --picdomain: "https://somedomain.com/";
}

s1.css

@import url("global.css");

body
{
  background-color: var(--bgd); //works if only it exist
  background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}

And load s1.css in html

<link rel="stylesheet" type="text/css" href="s1.css">

The HTML's background-color did changed, but background didn't show up. So I tried other way:

global.css

@picdomain: "https://somedomain.com";

s1.css

background: url("@picdomain/some/path/images/pic.png");  //can't read variable from imported css

didn't help

Only works while I set full URL for an image, like below:

global.css

:root
{
  --bgd: #C0C0C0;
  --picdomain: url("https://somedomain.com/some/path/images/pic.png");
}

s1.css

@import url("global.css");

body
{
  background-color: var(--bgd); //works if only it exist
  background: var(--picdomain); //no effect
}

But this isn't what I want......Is that possible to use css variable in "background"?

Cœur
  • 37,241
  • 25
  • 195
  • 267
RRTW
  • 3,160
  • 1
  • 35
  • 54
  • hi i'm afraid youre not missing quotes in there right? not familiar with using css vars, but as far as i Know when you set a value for an attribute in css (like background url) isn't that you have to enclosed the value with quotes? – jek Sep 18 '17 at 02:16
  • That was some type error while asking, I fixed in here and my code, but didn't work. – RRTW Sep 18 '17 at 02:37
  • 2
    I see, anyway you can check this ticket anyway it might give you a hint to your issue. https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url – jek Sep 18 '17 at 02:41
  • It worked if I set full path & file name in variable, but not just domain name. Anyway, still thanks for your hint~ – RRTW Sep 18 '17 at 02:45
  • Yeah I also read that, but I did'nt think that it may reflect to your requirements since you only want to put the "domain" of your pics into that variable excluding the "path" so I assumed that you will be having different paths and images for each background, but same domain. anyway good to hear that it helped you somehow. – jek Sep 18 '17 at 02:55

1 Answers1

-3
    <style type="text/css">
    :root {
        --slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/ 
        --slide-2: url("<?php echo 'images/logo-nfs.png';?>");  
    }`enter code here`

    .header111 {
      background-image : var(--slide-1); /*this is php*/ 
    }

    .header22 {
      background-image : var(--slide-2);
    }

    </style>

<div class="header111">
  test here 
</div>

<div class="header22">
  test here
</div>
<br>
Zahid Gani
  • 169
  • 6