How to add Blogger <data:> tags inside CSS?

Question

I am trying to add this blogger code inside CSS:

data:post.firstImageUrl 

but I don’t know how to write it. I tried the code below, but still not working.

 post-image{ background-image: url('data:post.firstImageUrl') } 

Can someone help me with this problem?

Answer 1

Unfortunately, you cannot do it this way.

But in blogger you can always use javascript to do something like this

First you should get the id for the first image then get the image url in javascript and edit the css in javascript too

 //Getting the image url of the first image var firstimagesrc = document.getElementById("FirstImage").src; document.getElementsByClassName("post-image")[0].style.backgroundImage = "url(" + firstimagesrc + ")"; 

 .post-image { width: 200px; height: 200px; background-color: #000000; background-position:center; background-size:200px 200px; } 

 <!--Let imagine that this is the first image--> <img src="https://i.imgur.com/aKnJrwx.jpg" width="100px" id="FirstImage" /> <div class="post-image"></div> 

Answer 2

If I understand correctly, try the following:

 post-image { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat left center; padding: 5px 0 5px 25px; } base64, R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o / XBs / fNwfjZ0frl3 / zy7 //// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) post-image { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat left center; padding: 5px 0 5px 25px; } 

Actual format:

 data:[<mime type>][;charset=<charset>][;base64],<encoded data> 

Now I am on my phone, I will review and add a little more to it when I get my laptop.

More on Data URls : CSS Tricks