Pages CSS - Can I use Media tags?

[Garrett M.]

Hi,

Is it possible to use a {media="image.png"} tag inside of a CSS file? I can't seem to get that to work correctly.

If not, how would you guys suggest I approach the problem? Maybe I am over thinking it?

Thanks,

Garrett

[h-y-b-r-i-d]

What are you trying to do exactly?

[Carl Maltby]

I am experiencing this same issue also; I uploaded images to Pages > Page Management > Media, which have tag references such as:'

{media="base-images/tape.png"}

In one of my Pages > Page Management > Templates I have a CSS file which references several of these:

.feed_image_header_tape1 a:before { background: url({media="base-images/tape1.png"}) no-repeat; }
.feed_image_header_tape2 a:before { background: url({media="base-images/tape2.png"}) no-repeat; }
.feed_image_header_tape3 a:before { background: url({media="base-images/tape3.png"}) no-repeat; }
.feed_image_header_tape4 a:before { background: url({media="base-images/tape4.png"}) no-repeat; }
.feed_image_header_tape5 a:before { background: url({media="base-images/tape5.png"}) no-repeat; }

 

The page's HTML renders out as:

.GOTM_image_header_tape a:before {
    position: absolute;
    z-index: 2;
    content: " ";
    top: -25px;
    left: 50%;
    width: 242px;
    height: 54px;
    margin-left: -121px;
    background: url({{media="base-images/tape.png"}}) no-repeat;
}

 

[AlexWebsites]

Same issue here, did you get this to work? I had to use the direct url within the pages css file. It would not work with the tag.

[TAMAN]

On 12/18/2015 at 7:24 PM, Garrett M. said:

Is it possible to use a {media="image.png"} tag inside of a CSS file? I can't seem to get that to work correctly.

 

On 6/13/2016 at 3:00 PM, Carl Maltby said:

I am experiencing this same issue also; I uploaded images to Pages > Page Management > Media, which have tag references such as:'

{media="base-images/tape.png"}

In one of my Pages > Page Management > Templates I have a CSS file which references several of these:

.feed_image_header_tape1 a:before { background: url({media="base-images/tape1.png"}) no-repeat; }
.feed_image_header_tape2 a:before { background: url({media="base-images/tape2.png"}) no-repeat; }
.feed_image_header_tape3 a:before { background: url({media="base-images/tape3.png"}) no-repeat; }
.feed_image_header_tape4 a:before { background: url({media="base-images/tape4.png"}) no-repeat; }
.feed_image_header_tape5 a:before { background: url({media="base-images/tape5.png"}) no-repeat; }

 

The page's HTML renders out as:

.GOTM_image_header_tape a:before {
    position: absolute;
    z-index: 2;
    content: " ";
    top: -25px;
    left: 50%;
    width: 242px;
    height: 54px;
    margin-left: -121px;
    background: url({{media="base-images/tape.png"}}) no-repeat;
}

 

42 minutes ago, AlexWebsites said:

Same issue here, did you get this to work? I had to use the direct url within the pages css file. It would not work with the tag.

 

Looks like template tags not parsing in pages CSS templates, probably a bug.

 

However, you should be fine using the media tag in theme custom.css