Styling with CSS: I am looking to display images beneath text

I am facing a challenge with displaying an image within a container. The container has a background image with the position set to relative and contains some text. I would like to display another image within this container, with the position set to absolute. However, I am encountering an issue where if the image has a positive z-index, it covers the text, and if it has a negative z-index, it goes under the container's background image, making it invisible.

As a beginner in HTML and CSS, I am seeking assistance from someone who is knowledgeable in this area. Please excuse any shortcomings in my English.

.banner {
        background: url(../img/Banner-back.png) center center no-repeat;
        background-size: cover;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans JP;
        position: relative;
    }
    .banner-content {
        z-index: 1
    }
    .creative {
        position: absolute;
        z-index: 0;
    }
    .text-shadow {
        text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .text-shadow01 {
        text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .text-shadow02 {
        text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
    }
    .underline-text {
        background: url(../img/underline.png) no-repeat;
        background-size: 100% 20px;
        background-position: bottom;
        padding: 0.25rem;
    }
    .title01 {
        font-size: 4.5rem;
    }
    .title02 {
        font-size: 2.8rem;
    }
    .banner-content {
        margin-left: 25vw;
        text-align: left;
    }
    .creative {
        width: 43%;
        top: 6vw;
        right: 40vw;
    }
<div class="banner">
  <div class="bg-green d-flex align-items-center justify-center">
    <div class="banner-left"></div>
    <div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
    <div class="banner-right"></div>
  </div>
  <div class="banner-content">
    <div><img src="assets/img/Banner01.png"></div>
    <div class="h1 mt-4">Promise</div>
    <div class="title01 text-green text-shadow01">Hiquality</div>
    <div class="title01 text-green text-shadow01">Sample text</div>
    <div class="title02 text-shadow02">Sample text</div>
    <div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
  </div>
  <div class="scroll-div">
    <img class="scroll-bar" src="assets/img/Scroll-bar.png">
  </div>
  <div class="creative"><img src="assets/img/creative-team.png"></div>
</div>

htmlcssimagez-index

Answer №1

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        
.banner {
    background: url(../img/Banner-back.png) center center no-repeat;
    background-size: cover;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans JP;
    position: relative;
}
.banner-content {
    z-index: 1
}
.creative {
    position: absolute;
    z-index: 0;
}
.text-shadow {
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.text-shadow01 {
    text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.text-shadow02 {
    text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
}
.underline-text {
    background: url(../img/underline.png) no-repeat;
    background-size: 100% 20px;
    background-position: bottom;
    padding: 0.25rem;
}
.title01 {
    font-size: 4.5rem;
}
.title02 {
    font-size: 2.8rem;
}
.banner-content {
    margin-left: 25vw;
    text-align: left;
}
.creative {
    width: 43%;
    top: 6vw;
    right: 40vw;
}

.title03 {
    padding: 263px !important;
}
.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
  
}

    </style>
</head>
<body>

<div class="banner">
    <div class="bg-green d-flex align-items-center justify-center">
        <div class="banner-left"></div>
        <div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
        <div class="banner-right"></div>
    </div>
    <div class="banner-content">
        <div><img src="assets/img/Banner01.png"></div>
        <div class="h1 mt-4">Promise</div>
        <div class="title01 text-green text-shadow01">Hiquality</div>
        <div class="title01 title03 text-green text-shadow01">Sample text</div>
        <div class="title02 text-shadow02">Sample text</div>
        <div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
    </div>
    <div class="scroll-div">
        <img class="scroll-bar" src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg">
    </div>
    <div class="creative"><img src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg"></div>
</div>
</body>
</html>

I made some adjustments to the HTML code and included CSS for text display over the image CSS tweaks

.title03 {
    padding: 263px !important;
}
.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
}

Added a new class title03 in the HTML

<div class="title01 title03 text-green text-shadow01">Sample text</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

The Javascript document refuses to load

I am currently working on a website with the main file named index.html: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Title</title> </head> ...

javascripthtmlexpresssocket.io

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

javascriptjquerycss

Enhance your table with custom styling by incorporating the seanmacisaac table and placing the tbody within a div

I am looking to make adjustments to a Jquery sortable, searchable table created by seanmacisaac. For more information, visit the link: Does anyone know how to set the height of the tbody to a fixed value while allowing vertical scrolling (overflow-y)? & ...

javascriptjquerycssscrollhtml-table

Tips for making a fluid DIV expand to fit the entire width of the page

My layout features fixed-width sidebars on the left and right, with a fluid main content area that fills the space in between using float:left. Here's an example: #left-sidebar {width: 200px;} #right-sidebar {width: 300px;} #main-content {margin-left ...

htmlcsslayout

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...

javascriptioshtmlwebhtml5-audio

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Tips for refreshing HTML multiple file upload without reloading the page

I am currently working on a feature that involves counting the number of files uploaded. If more than 10 images are uploaded, I want to clear the input field while keeping everything else in the form intact. Everything was working fine until I encountered ...

javascriptjqueryajaxhtml

Choosing default value in edit form in CakePHP while using virtual fields

In my edit form, I have successfully pre-selected values without any issues. However, there is a select input field that contains objects from the class ContactPerson. To display the prename and lastname in the view, I created a virtual field called fullna ...

phphtmlcakephpmodel-view-controller

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

htmlcsshtml-lists

JavaScript Error Caused by Newline Characters

I'm facing an issue with extracting data from a textbox using JavaScript. What I'm attempting to do is retrieve the value from a textbox, display it in an alert, and then copy it. Here's the current code snippet: var copyString = "Date: < ...

javascripthtmlasp.nettextbox

Arranging checkboxes in harmony with accompanying text using HTML and CSS

Here is the layout I have created using react JS. Below is the code snippet used to generate each checkbox: const CheckBoxItem = ({ Label, item, paramField, change }) => { return ( <div className="Search-Input-CheckBox-Item" ...

htmlcssreactjs

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

javascriptjquerycsshtml

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss

Place the first paragraph within a div above another paragraph in the same div

Presently, I have this item: https://i.stack.imgur.com/0dBd9.png however, my objective is to achieve this look: https://i.stack.imgur.com/NEBZf.png The code snippet in question is as follows: .bonus-div { width: 290px; height: 29px; ma ...

htmlcss

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

Challenges I encountered with styling my navigation bar using CSS

My goal is to have the font color change to blue when a user hovers over a link in my navigation bar. I've tried using the following CSS code: #nav a:hover{ color: #1B8AD8; background: none; text-decoration: none; } However, it's not working as ...

css

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

htmlcsstwitter-bootstrap