2

I have situation where design states to use two different images for background image(one for desktop, other for mobile). Those images are uploaded through CMS therefore I can retrieve URLs of one and other image using PHP.

Is there a way to pass these URLs as attributes or any other way to pass for my CSS to use?

I need some media queries based on height and width, therefore using javascript/jquery would be a pain.

I tried this:

  background-image: attr(data-desktop url);

where data-desktop is as an attribute of element and contains needed url, but no luck with this code.

Any suggestions or links would be a great help.

Mindaugas
  • 1,173
  • 5
  • 15
  • 31
  • 2
    I think this may be of help:https://css-tricks.com/css-variables-with-php/ – David Yue Jul 01 '15 at 21:17
  • 1
    Possible [duplicate](http://stackoverflow.com/questions/26967890/css-set-background-image-by-data-image-attr). – lmgonzalves Jul 01 '15 at 21:20
  • Hi David, yea - this gives some ideas, I am just now trying to figure out how to grab/pass value from my header.php file on style.php file. Maybe any ideas? because this covers only predefining values in css file. – Mindaugas Jul 01 '15 at 22:22

2 Answers2

0

I think it would work with

background-image: url(attr(data-desktop));

if your element have a data-desktop attribute that contains an url to the background image :)

dlegall
  • 412
  • 2
  • 5
0

You'll need to make use of the (properly positioned) before/after pseudo selectors to do that.

First make sure they are put in attributes like this:

<body data-portrait="<?php echo $portrait;?>" data-landscape="<?php echo $landscape; ?>">

Then retrieve them with a properly positioned before/after pseudo-element in their respective queries, like

body:before {content: attr(data-desktop); //etc}
lucian
  • 623
  • 10
  • 21