I am currently working on a one-page WordPress theme. Each section of the page includes a header with an image and an overlay.
The header consists of a background image, with a wrap-width image inside. Below that, there is a semi-transparent png image that should overlay the header image and span the full width.
Since I have different styles for the sections, I have numbered them and want the overlay image to be a different color for each section, which I plan to do through CSS.
So far, I have only been able to make the overlay visible by specifying a height value. However, I want the height to be flexible and always 100% of the width to ensure responsiveness.
My Code:
<?php query_posts('post_type=page&order=ASC'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="content" class=" section-<?php echo $i++; ?>">
<h2 class="headline"><?php the_field('headline') ?></h2>
<div class="header">
<div class="wrap cf">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('bones-thumb-600');
}
else {
}
?>
</div>
<div class="overlay"></div>
</div>
<div id="inner-content" class="wrap cf">
<div id="main" class="m-all">
<div class="stripes"></div>
<a class="logo" href="#top"><img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" /></a>
<div class="sidebar">
<?php the_field('sidebar') ?>
</div>
<div class="main-content"><?php the_content(); ?></div>
<img src="<?php echo get_template_directory_uri(); ?>/library/images/separator.svg"/>
</div>
</div>