CODEWITHSUNDEEP
htmlcssblogger
Basil Mohamed
Basil Mohamed

Reputation: 19

Make first photo as the post background image in Blogger

I want to have a background for each post, and that background is the first picture of the post. I had tried the following but it did not work:

<Variable name="body.background" description="BackGround" type="background" color='transparent' default="$(color) 
url(<data:post.firstImageUrl/>) no-repeat fixed top center" 
value="$(color) url(<data:post.firstImageUrl/>) no-repeat fixed top center"/>

Upvotes: 0

Views: 365

Answers (2)

Muhammad Saleh
Muhammad Saleh

Reputation: 792

Leave your background variable render a default background for other pages, and add a css code to override body background style using tag <data:view.featuredImage/>, it's rednering the first image in post, and you can use it outside widgets:

<style type='text/css'>
    body { 
        background: url('<data:view.featuredImage/>');
    }
</style>

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272106

You could make some changes to the template. Locate the divs that have post hentry classes and add the following attribute without disturbing existing markup:

expr:style='data:post.firstImageUrl ? &quot;background-image: url(&quot; + data:post.firstImageUrl + &quot;)&quot; : &quot;&quot;'

So the markup would look like:

<div
    class='post hentry uncustomized-post-template'
    itemprop='blogPost'
    itemscope='itemscope'
    itemtype='http://schema.org/BlogPosting'
    expr:style='data:post.firstImageUrl ? &quot;background-image: url(&quot; + data:post.firstImageUrl + &quot;)&quot; : &quot;&quot;'
>

And finally add some CSS to control the remaining properties of background image:

.post.hentry {
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
}

Upvotes: 1

Related Questions