WordPress: CSS property getting cancelled out? - php

Question

In my page.php I am trying to output the featured image in .page-wrapper div and display using style="background-image: url('<?php echo $thumb['0'];?>') !important;" on top of the page (Inline css)
The problem is it keeps on being crossed out by the browser. It may be because there is a 3rd party plugin and that could be overriding it - so I've tried adding !important tag to my property. Not working. And I'm disabled the plugin, no luck. IDEAS??
Link to page: http://radian3.com/events/
Here is the page.php
<div class="about-container">
<!-- The POST LOOP -->
<?php if(have_posts()) :
while (have_posts()) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>') !important;">
<b class="about-title"><?php the_title(); ?></b>
<!-- <div class="about-icon-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')"></div> -->
</div>
<div class="contact-body-wrapper">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else :
echo '<p>No content found..</p>';
endif;
?>
CSS
/* single.php page */
.page-wrapper {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* background-image: url('../img/about-our-team.jpg') !important;
*/ height: 30rem;
background-repeat: no-repeat;
background-size: cover;
}

Answer 1

Actually, its your code in page.php that's doing the overriding.
The image you see crossed out id included in your css file, the one with the emply url the one generated by your code.
Your code isn't returning any image, so you need to fix that. Unless you have $post explicitly defined, it wont have a value here, so $post->ID will be empty.
You should use get_the_ID() inside the loop, i.e.
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
if ($thumb){
?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')">
<?php
// rest of your code....
}
FYI, you should also check to make sure $thumb has a value - if it doesn't, you could use a default placeholder instead

Answer 2

You need to remove inline style attribute which sets no image to it but it is overriding css for background image url for page-wrapper
You need to remove the following attribute from page-wrapper div.
style="background-image: url('') !important;"

Answer 3

Please give like this
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");