wordpress blog dynamic background image

0
votes

Apologies if this has been covered however if it has been I had trouble finding it.

I am putting together a blog site which I plan to convert into a wordpress theme. For each blog post I have a full screen image link on the landing page which takes you the particular blog post. The code for each post is identical.

HTML

<a href="#" ><div class="post"></div></a>

CSS

.post{
    width: 100%;
    height: 75vh; 
    background-image: url(../img/5.jpg); 
    background-position: center 0px; 
    background-repeat: repeat-y; 
    background-attachment: fixed; 
    margin-bottom: 100px; 
    position: relative; 
}

As I wish to convert this into a wordpress theme I need a way for the code to be replicated with a different background-image relating to each new post. Is their a way to do this using PHP or javascript?

2
javascriptphpcsswordpress

2 Answers

0
votes

Yes you can use Custom fields for that purpose. https://codex.wordpress.org/Custom_Fields

<?php
$cust_image = get_post_meta($post->ID, 'backgroundimg', true);
echo '.post {background-image:url(';
echo $cust_image ? $cust_image : '../default_background.jpg';
echo ');}';
?>
0
votes

Hope this works for you.

<a href="#" >
    <div class="post" style="background-image:url('<?php the_post_thumbnail_url( $post->ID ); ?>')">
    </div>
</a>