Implementing a see-through layer using CSS

This part of my site features a background image. I am attempting to add a transparent overlay at the top of this section, as indicated by the red highlight. I want to achieve this effect using CSS without directly applying the overlay to the image. The red color is just for visibility, the actual overlay will match the colors of the boxes below. How can I create a transparent overlay that only covers a specific section of the image?

https://i.sstatic.net/ysNdW.jpg

<!-- Contact Section -->
<div id="contact">
    <div class="container">
        <h1><strong>Contact Summit</strong></h1>
        <hr>

        <div class="row">

            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php" class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                            <input type="text" class="form-control input-md" id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end contact section -->

/*==================
CONTACT SECTION
===================*/

#contact{
background: url('../img/summit.jpg') no-repeat center center fixed;
background-size: 100% auto;
color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#contact h1 {
color: #FCFFF5; /*white*/
text-align: center;
}

#contact .col-md-6 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
padding-top: 30px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;
    
opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;

height: 310px;
}

Answer №1

Here is a suggestion to enhance your CSS styling:

#contact {
  background: url('../img/summit.jpg') no-repeat center center fixed;
  background-size: 100% auto;
  color: #FCFFF5; /*white*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  padding-top: 30px;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

Check out the updated code sample:

#contact {
  background: url('http://lorempixel.com/600/300/nature/8/') no-repeat center center fixed;
  background-size: 100% auto;
  color: #FCFFF5; /*white*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  padding-top: 30px;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

#contact .col-md-6 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
padding-top: 30px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;

height: 310px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Contact -->
<div id="contact">
    <div class="container">
        <h1><strong>Contact Summit</strong></h1>
        <hr>

        <div class="row">

            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php" class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                            <input type="text" class="form-control input-md" id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end contact -->

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

What's the best way to rearrange Bootstrap cards from a horizontal layout to a vertical layout for improved responsiveness?

I'm currently working with Bootstrap to align two cards horizontally, but I also want to ensure that mobile users can view the cards stacked in a column layout. I've experimented with adding 'flex-direction' in combination with the @med ...

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Show "News" in French when hovering over the French option. ul#topmenu li a#HyperLink:hover ul { background-color: pink; display: list-item; } <ul id="topmenu"> <li class="langHorzMenu"> <a href="#" id="HyperLink">French</ ...

Flashing white when transitioning background images

My website features a div with a blurred image that I want to gradually unblur upon hovering, using transition-property and transition-duration. I have two versions of the image prepared - one blurred and one unblurred. However, when viewing online (desp ...

Incorrect form element style is only visible when contained within an unstyled HTML Details tag

A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...

Utilize AngularJS to Access Global JavaScript Variables

I recently encountered a situation where I needed to incorporate some dynamic functionality into a website I was building. This led me to AngularJS, which I decided to integrate into certain parts of the site rather than the entire thing. Within my JavaSc ...

Organizing content into individual Div containers with the help of AngularJS

As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

Retrieve information using Angular's EventEmitter

Recently I started learning Angular and encountered a challenging issue that has kept me occupied for the past few hours. I have implemented a parent-child relationship between two components, with a need to share a boolean variable from the parent to the ...

Effortlessly move and place items across different browser windows or tabs

Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly. var currentDragElement = null; var draggableElements = document.querySelectorAll('[draggable="true"]'); [].forEach ...

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

Challenging substitution process within text fields on MS SQL

I have a large MS SQL TEXT field. My task is to clean it up, which includes identifying and removing chunks of HTML content intentionally stored within the text. This process involves modifying links, words, and formatting in these blocks of text across t ...

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet: .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; } .div-2 { margin: auto; } i { color: #ffffff; } &l ...

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

Attempting to incorporate images alongside menu items

Here is a list of menu items. Please take note that I have assigned the image class to the City menu item. <p:submenu label="Address"> <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" /> <p:menuitem value="Stat ...