CODEWITHSUNDEEP
javascriptphpjqueryhtmlblogger
PhoenixTW
PhoenixTW

Reputation: 113

How do you use Blogger Post Image as a background image?

I'm a novice to php, js, java, script, etc but I know HTMl and CSS. I am looking to set a Blogger Post's First Image as a background on a div section; making essentially a small box link on the main page. I have found the following code/script within the default Blog widget:

<img expr:src='data:post.firstImageUrl'/>

This by default will generate the first image as its own element on the page but I want to set it to the background, something like this:

<div style="background-image: expr:src='data:post.firstImageUrl';"></div>

I know the above won't work due to the incorrect syntax but is there something similar that I can use?

Any help is greatly appreciated.

Upvotes: 1

Views: 2419

Answers (2)

Sinh
Sinh

Reputation: 11

help

<div class="newphoto"></div>
<script>
document.getElementsByClassName('newphoto')[0].style.backgroundImage = "url('<data:blog.postImageUrl/>')" ;
</script>

Add the else line to javascipt

document.getElementsByClassName('newphoto')[0].style.backgroundImage = "url('https://1.bp.blogspot.com/-aAjLvDndDIo/WH2DcqOeX9I/AAAAAAAAI9Y/W3_fmq0uGXseb_A1XWhaj5ZyL3DzKJD9ACLcB/s1600/bgplaydefault_djhayhay247.jpg')" ;

Upvotes: 0

user6144987
user6144987

Reputation:

Use this expression : note the space around +

<div expr:style='&quot;background-image: url(\&quot;&quot; + data:post.firstImageUrl + &quot;\&quot;);&quot;'></div>

Upvotes: 4

Related Questions