How to make Post Image as a background of the current page on blogger

Add this code bellow in head tag:

   <head>
  <style>
<b:if cond='data:blog.pageType == "item"'>
body:before {background: url("<data:blog.postImageUrl/>");content: ' ';position: fixed;width: 100%;height: 100%;opacity: 0.1;background-repeat: no-repeat;background-size: 100% 100%;}

    </b:if>
    
  </style>
    </head>

automatically detects the image post when you used this code in blogeer platform background: url("<data:blog.postImageUrl/>")
Exemple:

 <head>
  <style>
    body {background: white;}
  body:before {background: url("https://cdn.pixabay.com/photo/2020/09/05/05/45/squirrel-5545638_960_720.jpg");content: ' ';position: fixed;width: 100%;height: 100%;opacity: 0.2;background-repeat: no-repeat;background-size: 100% 100%;}
  img {width: 200px;height: 120px;}#image {padding-top: 10%;text-align: center;}
  </style>
  </head>
  <body >
    <div id="image">
  <img src="https://cdn.pixabay.com/photo/2020/09/05/05/45/squirrel-5545638_960_720.jpg">
      
    </div>
</body>

The body style will be like this after adding the code: How to make Post Image as a background of the current page on blogger

☷✎

How to make Post Image as a background of the current page on blogger

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

blogger meta description generator

How to keep input value if user change current page in blogger

How to make Post Image as a background of the current page on blogger

Related

Comments

Post a Comment