Make first photo as the post background image in Blogger

Question

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"/>

Answer 1

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 ? "background-image: url(" + data:post.firstImageUrl + ")" : ""'

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;
}

Answer 2

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>