Step by step guide on incorporating two background images in a single header

I'm looking to create a header with a background image that appears twice, like this:

To achieve the effect, I added opacity of 0.5 to one of the images, but it is affecting everything in my header including text and logo. Is there a way to prevent the text and logo from being affected by the opacity applied to the header banner?

/* Styling for marketing business main header */
.marketing-navbar_items {
    font-family: Helvetica Neue;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
}

.marketing-main-header_banner {
    background-image: url("https://svgshare.com/i/8KR.svg");
    background-size: auto 1199px;
    background-repeat: no-repeat;
    background-position: center -250px;
    position: relative;
    height: 949px;
}

.sample {
    background-image: url("https://svgshare.com/i/8KR.svg");
    background-size: auto 1199px;
    background-repeat: no-repeat;
    background-position: center -250px;
    position: absolute;
    height: 949px;
    opacity: 0.5;
}

.marketing-main-header_details {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.marketing-main-header_description p {
    font-size: 30px;
    font-family: HeaderFont;
    color: white;
    /* width: 55%; */
    text-align: center;
    margin: 50px 0px;
}

.marketing-main-header_button-primary {
    background-color: white;
    background-size: 150px 100px;
    font-size: 16px;
    border-color: transparent;
    color: #4834D4;
    font-family: Roboto Regular;
    width: 373px;
    height: 92px;
}

.marketing-main-header_button {
    margin-top: 50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid marketing-main-header">
        <div class="marketing-main-header_banner">
        <div class="sample">
            <nav class="navbar navbar-expand-lg navbar-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto marketing-navbar">
                        <li class="marketing-navbar_items  nav-item">
                            <a class="marketing-nav-link nav-link" href="#">Dla kogo </a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link" href="#">Agenda</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link" href="#">Prowadzacy</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class=" marketing-nav-link nav-link " href="#">Faq</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link " href="#">Kontakt</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link " href="#">Kompetencje</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="marketing-main-header_details">
                    <div class="marketing-main-header_logo">
                        <img src="https://thumb.ibb.co/hPrhZp/logo_mib.png">
                    </div>
                    <div class="marketing-main-header_title">
                        <h1>SZKOLENIA</h1>
                    </div>
                    <div class="marketing-main-header_description">
                        <p>Lorem ipsum dolor sit amet, an pro dicta maiorum recusabo.</p>
                    </div>
                    <div class="marketing-main-header_sub-description">
                        <p>Lorem ipsum dolor sit amet, an pro dicta maiorum recusabo.</p>
                    </div>

                    <div class="marketing-main-header_button">
                        <button type="button" class="marketing-main-header_button-primary">Poznaj Agende</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Is there a way to make sure the text is not affected by the opacity set on the header background image?

htmlcssbootstrap-4

Answer №1

Create a `:before` pseudo-element on the class `.marketing-navbar_items`. By doing this, you can ensure that it does not affect the opacity of its child elements (since there are none).

/* Main header for marketing business */
.marketing-navbar_items {
    font-family: Helvetica Neue;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
}

.marketing-main-header_banner, .marketing-main-header_banner:before {
    background-image: url("https://svgshare.com/i/8KR.svg");
    background-size: auto 1199px;
    background-repeat: no-repeat;
    background-position: center -250px;
    height: 949px;
}

.marketing-main-header_banner {
    position: relative;
}

.marketing-main-header_banner:before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 50px;
    opacity: 0.5;
}

.marketing-main-header_details {

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.marketing-main-header_description p {
    font-size: 30px;
    font-family: HeaderFont;
    color: white;
    /* width: 55%; */
    text-align: center;
    margin: 50px 0px;
}

.marketing-main-header_button-primary {
    background-color: white;
    background-size: 150px 100px;
    font-size: 16px;
    border-color: transparent;
    color: #4834D4;
    font-family: Roboto Regular;
    width: 373px;
    height: 92px;

}

.marketing-main-header_button {
    margin-top: 50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid marketing-main-header">
        <div class="marketing-main-header_banner">
        <div class="sample">
            <nav class="navbar navbar-expand-lg navbar-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ml-auto marketing-navbar">
                        <li class="marketing-navbar_items  nav-item">
                            <a class="marketing-nav-link nav-link" href="#">For Whom </a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link" href="#">Agenda</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link" href="#">Speakers</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class=" marketing-nav-link nav-link " href="#">FAQ</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link " href="#">Contact</a>
                        </li>
                        <li class="marketing-navbar_items nav-item">
                            <a class="marketing-nav-link nav-link " href="#">Competencies</a>
                        </li>
                    </ul>
                </div>
            </nav>


            <div class="marketing-main-header_details">
                <div class="marketing-main-header_logo">
                    <img src="https://thumb.ibb.co/hPrhZp/logo_mib.png">
                </div>
                <div class="marketing-main-header_title">
                    <h1>TRAININGS</h1>
                </div>
                <div class="marketing-main-header_description">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>
                <div class="marketing-main-header_sub-description">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                </div>

                <div class="marketing-main-header_button">
                    <button type="button" class="marketing-main-header_button-primary">Explore Schedule</button>
                </div>
            </div>
            </div>
        </div>
    </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

Displaying HTML elements in a specific order using ng-repeat

Upon receiving the json message, my goal is to display it in HTML in a specific order. Within the json message, the position value indicates the desired order of elements, with 0 representing the first element in the array. At times, the json message may ...

javascripthtmljsonangularjs

What is the best way to change the height of cells within a grid layout?

Enhancing the buttons with a touch of depth using box-shadow resulted in an unexpected outcome - the shadows bleeding through the gaps and causing uneven spacing. https://i.sstatic.net/LYssE.png In an attempt to rectify this issue, I decided to tweak the ...

htmlcsscss-grid

Problem encountered when attempting to set and retain default values in a PHP select box

<form name="search" method="post" > Seach for: <input type="text" name="find" value="<?php echo (isset($_POST['find']) ? $_POST['find'] : ''); ?>" /> in <Select NAME="field"> <Option VALUE="catego ...

phphtml

When transformed into clickable links, the list items start piling up on

Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...

htmlcss

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

htmlcss

Unable to get jQuery accordion to function as expected when using content retrieved through AJAX requests

Seeking assistance with a malfunctioning accordion that is not working after receiving content from another page through AJAX. The problematic page in question can be found at: Upon loading the page, it sends a default city name to processtempo.php which ...

jqueryhtmlajaxaccordionjquery-ui-accordion

Tips for moving an input bar aside to make room for another

Is it feasible to have two input bars next to each other and keep one open until the other is clicked, then the first one closes as well? I attempted using a transition with "autofocus," but the bar ends up closing when clicked on in my site. If anyone ca ...

javascripthtmlcssinputtransition

Having difficulty setting a value for a tooltip with replaceWith() function

When using jQuery's .replaceWith() method to insert new DOM contents, I noticed that all content gets replaced except for the value of the title. Even though I tried different approaches, the tooltip only displays {{descriptions.title}} instead of the ...

javascriptjqueryhtmlangularjs

The best way to centralize the input group in bootstrap

I attempted to center align my search bar, but it stubbornly stays to the left. Here's the code I'm using: <head> <style> html { overflow: auto; } html, body, iframe { ...

htmlcssbootstrap-4

If the image is not found, add a count instead of showing a new one each time

I have implemented a function to retrieve the two-letter country code: $ipaddress = $_SERVER['REMOTE_ADDR']; function ip_details($ip) { $json = file_get_contents("http://ipinfo.io/{$ip}"); $details = json_decode($json); return $detai ...

phphtmljsonfunctionlogging

What is the method to extract mimeType from an HTMLImageElement?

After researching the MDN documentation on HTMLImageElement, I found no mention of the mimeType. I did come across some resources explaining how to retrieve the mimeType from a File Object. However, my specific requirement is to extract the mimeType from ...

javascripthtmlimage

Adjust the DIV shape to fit perfectly within the browser window without overlapping with any other elements

http://jsbin.com/iGIToRuV/1/edit Currently, I am working on developing a WYSIWYG website designer as part of an experimental project for various purposes. The ultimate goal is to ensure that it is both desktop and mobile-friendly. However, I have encount ...

javascriptjquerycsslayoutcss-position

What strategies can I use to prevent any spaces between cards when I unfold them?

Hello, I am looking to create a basic webpage. In this link, there are 4 cards that can be opened. However, when I open card B, a gap appears between card A and card C - and I'm not sure why this is happening. Here is a link to the HTML code I have us ...

htmlcssbootstrap-4

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

I've been out of the webpage creation game for a while, but I've recently decided to get back into it. Like everyone else, I want to learn the best way to do this. However, I find myself facing a dilemma on how to structure my pages. My initial i ...

phphtmlcsslayoutinclude

Create a spectrum of vibrant colors depending on the numerical value

I'm attempting to create a function that generates rainbow colors based on a numerical value. var max = 10000; var min = 0; var val = 8890; function getColor(min, max, val) { // code to return color between red and black } Possible Colors: Re ...

javascripthtmlcsscolors

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

creating a personalized tooltip for every item within a dynamically generated @html.dropdownfor control in mvc3

Currently, I am developing a web project using MVC 3 and Razor in C#. In my code, I have implemented @Html.DropDownListFor to dynamically display items. Now, I would like to add tooltips for each item displayed by @Html.DropDownListFor. Here is the relev ...

jqueryhtmlasp.net-mvctooltipdropdownlistfor

including a content tag into an input field within a template

I'm experimenting with the new html5 template tag to create a versatile form that can be used in various situations without relying heavily on javascript. Check out this fiddle to see what I have so far http://jsfiddle.net/684uH/ My objective is to ...

javascripthtmlweb-componenthtml5-template

What are the steps to employ a query string to display a specific image?

If I understand correctly, I can utilize a query string and parse it to display certain information. How would I apply that concept to load a specific image? https://codepen.io/anon/pen/qYXexG <div id="gallery"> <div id="panel"> <img ...

javascripthtmlcss

Transfer your documents effortlessly as soon as they are

I am having trouble implementing an automatic file upload feature without the need for a separate upload button. Below is the code I have so far, excluding the irrelevant CSS. //html <!-- some codes here--> <input type="file" id="f ...

javascriptphphtmljqueryajax