Semi-Transparent Blog Page on An Image

I’m getting clients who like the look of their blog page overlaying an image. You can do that with JavaScript of course. But it is just as easy to do with CSS and a page template.

Let’s do this without Bootstrap too.

Make the image responsive:

 

img {
    width: 100%;
    height: auto;
}

Give the image a relative positioning using a css class:

.relative_fix {
	position: relative;
}

Use class to fix the content so that it is always on top of the image:

.content_fix { 
   position: absolute; 
   overflow-y:scroll;
   top: 33px;
   color: #000;
    margin-left: 232px;
    width: 73%;
   height: 100%;
   border: none;
   z-index: 0; 
}

Upload your image and determine it’s location, then add it to your custom content template with your classes:

<img class="relative_fix" src="https://prowordpress.dev/wp-content/uploads/2015/12/backgroundImage.jpg">
      <?php if (have_posts()) while (have_posts()) : the_post(); ?> 

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div class="article-page black">

<div class="TextBox content_fix">
             <?php the_content(); ?>
           </div>

         </div>

      </div>

                             
   <?php endwhile; ?>

And there ya go!