CODEWITHSUNDEEP
htmlcssblogger
Alvian Casablancas
Alvian Casablancas

Reputation: 93

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

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?

Upvotes: 5

Views: 496

Answers (3)

Taufik Nurrohman
Taufik Nurrohman

Reputation: 3409

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>

Upvotes: 1

xTrimy
xTrimy

Reputation: 823

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>

Upvotes: 0

DirtyBit
DirtyBit

Reputation: 16792

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

Upvotes: 0

Related Questions