Generating a partially translucent image overlay

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>

Answer №1

opacity: 0.5; is the key here. Remember, 0.0 means transparent and 1.0 means fully visible. Therefore, 0.5 would represent a 50% level of visibility.

Answer №2

Follow these steps

.image-holder{
  height: 200px;
  width:200px;
  position: relative;
  }
.image-holder:after{
    content:'';
  position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.3);
  }
<div class="image-holder"><img src="images/img02.jpg" height="371" width="556" alt="image description"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to align two buttons side by side on a webpage using only HTML and CSS?

Can you help me figure out how to align two buttons next to each other with some space between them using only css and html? If you take a look at my html code and css code, you'll see that the two buttons are not aligned properly. * { margin: 0 ...

What could be causing my CSS not to update properly in the web browser?

During the process of coding my website, I have noticed a peculiar issue. Whenever I save my HTML and CSS documents and refresh my browser, I am able to see the changes in the HTML right away. However, the changes in the CSS do not seem to take effect imme ...

What is the best way to adjust the height of a div element according to the width of its child element?

I am facing an issue with two nested divs, where the inner one is absolutely positioned inside the outer one. I want the height of the outer div to adjust dynamically according to changes in the width of the inner div. To better illustrate the problem, I h ...

Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hi ...

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize th ...

"Adjusting the Height of an MUI Autocomplete Input Field: A Simple Guide

I've been attempting to shrink the size of the Input field in MUI autocomplete but haven't had any luck. Here's the code I tried: styling: autocompleteStyle: { height: '2.3rem', color: `${theme.palette.grayDark1} !important ...

Issues with a top navigation bar

I'm currently working on customizing a header menu to my liking but have limited experience with CSS. The header menu consists of two main items, each with a dropdown. I envision the first menu item to look like this upon hover: https://i.sstatic.net ...

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

Creating a Custom Alert Box in Javascript with Image Alignment

I have just finished creating a custom alert box using Javascript, complete with text and images. However, I am facing an issue with alignment. The output is not as expected. I am trying to display the correct mark and text on the same line. Can someone ...

Allow access only to authorized staff members in Django

So I'm working on this Django code and I want to display a button only if the user is either a super user or staff. I've tried using is_superuser and is_staff but it's not working for me. {% if request.user == post.user %} <div class=&qu ...

The Jade template is not rendering the page correctly as anticipated

I'm working with Node.js & express, using the Jade template for the view. My issue is that the Test text is currently hidden under the black navigation bar. How can I move it to the bottom, below the navbar? What am I missing in my code? Here is the ...

How to use Nokogiri to efficiently extract targeted nodes from HTML

In my Ruby script, I am trying to extract specific values from an HTML document using the Nokogiri gem. The HTML content I'm parsing includes information about a user and their registered device. #!/usr/bin/ruby require 'Nokogiri' doc = No ...

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

Is there a way to assign the value of a textfield to a session attribute in JSP prior to rendering?

Imagine I have the following code snippet: <html> <head> <script> function setSession() { var roll=document.getElementById("rollno").value; session.setAttribute("rollno", roll); } & ...

What steps are involved in integrating QuickBlox on your website?

I am completely new to web development and have a question about integrating QuickBlox into my website using JavaScript. I have included the necessary JavaScript files in my website and set up the QuickBlox admin application, but I'm not sure how to p ...

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

Using BeautifulSoup to extract a specific tag from a webpage

I am working with HTML code <div class="b-media-cont b-media-cont_relative" data-triggers-container="true"><span class="label">Engine:</span> petrol, 1.6 L<br/> <div class="b-triggers b-triggers_theme_dashed-buttons b-triggers_s ...

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Imagine this vue.js template code: <div v-if="y===0"> <input ref="textbox">{{textbox}}</input> </div> In the scenario where y is data retrieved asynchronously, Is there a way to direct focus to the 'input' element onc ...

Discovering the quantity of identical elements within a JavaScript array

Looking for some assistance in solving a JavaScript problem as I am relatively new to the language: I have an array and I need help in determining the count of identical values. Below is my array: var arr = ["red", "blue", "green", "red", "red", "gray"] ...

Is having async as false really detrimental?

Splitting my inquiry into two sections. Within my website, I am dynamically generating some divs by utilizing ajax post requests to retrieve data from the database. Following is the structure of my setup. <html> <body> <script type=" ...