how can we pass image directly to a background image in css-CodePudding

as im having a variable that holds the image, i need to add the image instead of URL in css background image tag, so how to achieve this? My code now: .devicewidth{

  background:url("image url")}

@media only screen and (max-width: 400px) {

  table[class=devicewidth] {

    width: 420px!important;

  }

  img[class=banner] {

    width: 400px!important;

    height: 80px!important;

  }

}

my image variable: image

this image variable holds the direct image, not any path or url

CodePudding user response：

You can do this by using this var() function of CSS you can follow below links

https://www.w3schools.com/css/css3_variables.asp

https://www.javatpoint.com/css-variables

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

CodePudding user response：

:root {
  --image: url('data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjI0NiA0LjI4NEMyMy4xNjcgNC4wMiAyMi45MjQgMy45NyAyMi43MjggNC4xNjZMMTkuMTk3IDcuNjk4TDE1LjgwMSA0LjMwMkwxOS4zMzMgMC43N0MxOS41MjggMC41NzUgMTkuNDc5IDAuMzMyIDE5LjIxNCAwLjI1M0MxOC42NzIgMC4wODk5OTk4IDE4LjA5OCAwIDE3LjUgMEMxNC4xODcgMCAxMS41IDIuNjg3IDExLjUgNkMxMS41IDYuNjE3IDExLjU5NCA3LjIxMiAxMS43NjcgNy43NzNMNC45OTEgMTQuNTQ5QzQuODI3IDE0LjUzMSA0LjY2OCAxNC41IDQuNSAxNC41QzIuMDE3IDE0LjUgMCAxNi41MTggMCAxOUMwIDIxLjQ4MiAyLjAxNyAyMy41IDQuNSAyMy41QzYuOTgzIDIzLjUgOSAyMS40ODIgOSAxOUM5IDE4LjgzMiA4Ljk2OSAxOC42NzMgOC45NTEgMTguNTA5TDE1LjcyNiAxMS43MzNDMTYuMjg4IDExLjkwNiAxNi44ODMgMTIgMTcuNSAxMkMyMC44MTMgMTIgMjMuNSA5LjMxMyAyMy41IDZDMjMuNSA1LjQwMyAyMy40MSA0LjgyOCAyMy4yNDYgNC4yODRaTTYuMTQ3IDIwLjY0NkwzLjg5NyAyMS4yNUwyLjI1IDE5LjYwNEwyLjg1NCAxNy4zNTRMNS4xMDQgMTYuNzVMNi43NTEgMTguMzk2TDYuMTQ3IDIwLjY0NloiIGZpbGw9IiNGRjY2MDAiLz4KPC9zdmc Cg==');
}

then

.nav-home {
  background-image: var(--image);
}