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

Question

I'm trying to add this blogger code inside CSS:

data:post.firstImageUrl

but I don't know how to write it. I have tried below code but still not work.

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

Can anyone help me with this problem?

Answer 1

Unfortunately, you can't do that by this way

But in blogger, you can always use javascript to do things like that

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's 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

Just make sure you write the CSS code inside a literal <style> tag:

<b:loop values='data:posts' var='post'>
  ...
  <div expr:class='"post-image-" + data:post.id'/>
  <style media='screen'>
  .post-image-<data:post.id/> {
      background-image: url('<data:post.firstImageUrl/>');
  }
  </style>
  ...
</b:loop>

Answer 3

If I've understood correctly, try this:

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

The actual format:

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

I'm on my phone at the moment, I will revise and add more to it soon as I get my laptop.

For more study on Data URls : CSS Tricks