Ways to Create a Text Overlay on an Image for your Banner

I have a banner div element with an image overlapping it. I'm trying to display my text without it being covered by the image, but I'm facing some challenges.

Here's a visual example of the issue:

https://i.stack.imgur.com/JdW75.png

This is what my HTML code looks like:

.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}

.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
}

.banner-text {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
  <span class="banner-text">There is a cat above me</span>
</div>

My queries are:

  1. Is it recommended to place the image within the container-fluid div for better practice? Or is having it outside the banner as I currently do acceptable?

  2. How can I ensure that the text isn't hidden behind the image?

Thank you for any guidance on these questions and other suggestions you may have!

htmlcssbootstrap-4

Answer №1

If you have a logo or any header-related image, it's best to keep it within the header container along with the text. To avoid overlapping text, you can adjust the vh of the container div and move the banner-text slightly down by adjusting its top attribute.

On the other hand, if you need the text to be in the same position but visible, you can remove it from the container div and position it absolutely from the top. The z-index property won't work effectively if the container div has a lower value, so positioning the text outside would be a better solution.

Here is some CSS code snippet for your reference:

.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}

.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
}

.banner-text {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  top: 70px;
  z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">

</div>
<span class="banner-text">There is a cat above me</span>

Answer №2

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Example</title>    
<style>
.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}
.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
  border-radius: 100%;
}
.banner-text {
  font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: white;
    position: absolute;
    transform: translateY(-50%);
    top: 49px;
    z-index: 0;
    left: 50px;
    text-shadow: 0px 3px 3px black;
}
  </style>
  </head>
  <body>
      <img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
      <div class="container-fluid header-banner-container">      
      </div>
      <span class="banner-text">There is a dog next to me</span>
  </body>
</html>

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

Link the same CSS file with multiple HTML pages

Currently, I am in the process of creating an external CSS file specifically for my homepage. The only issue I am encountering is that while I know how to resolve this problem for one HTML page, I am uncertain about how to address it for other pages. For ...

htmlcss

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

cssreactjstypescriptnext.jstailwind-css

HTML5 - Ajax - puzzling behavior that I am unable to comprehend

Need Help Clarifying My Issue: I currently have a Div with Page 1 content. Page 1 contains a button that transitions the div content to Page 2. Page 2 has a button that switches the div content back to Page 1. The Problem: If Page 1 is loaded first, t ...

phpjavascripthtmljquery

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

javascriptcssvue.js

Retrieve the next element in android studio that shares the same class name as jsoup

i am trying to access the next element with the same class name in HTML. The HTML tag structure looks like this: HTML: <section class="post"> <img class="pecintakomik" src="/images/top/op.jpg" alt="pecintakomik.com" /> <div class=" ...

javaandroidhtmljsoup

Ways to position an absolute element in the middle of two CSS Grid cells

Is it possible to position an element with position: absolute between two grid cells, where half of the element is on the sidebar and the other half is on the rest of the page? The challenge arises when there is overflow set on both the sidebar and the pag ...

css

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

What is the method for obtaining receipt numbers in sequential order, such as the format AB0810001?

Is AB the receipt code that should remain constant followed by the current date (08) and 10001 as the receipt number? ...

phpjavascripthtmlcss

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

csswordpresswoocommercestorefronthook-wordpress

Strange HTML antics

On my website, I encountered an issue when trying to register without entering any information into the required fields. The errors were correctly displayed in this screenshot: However, after inserting random characters into each field and attempting to r ...

javascripthtmlcssangularjsnode.js

Multiple Ajax calls interacting with each other are causing issues

Within my Index.php file, there is an ajax call that loads a php page containing an HTML form. I am attempting to trigger another ajax call from Index.php whenever a select box is changed. Everything functions properly except for the ajax on change event ...

phpjqueryhtmlajax

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Assign a class to the "li" element containing an "a" tag with the specified href attribute

Is it possible to transform the "href" attribute of an element into a class or id like "li" for better css handling? <ul> <li><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><d ...

jqueryhtmlcss

Tips for capturing the dx dy SVG attribute using CSS

Seeking advice on the most effective way to access the dx dy SVG attribute in CSS. If this is not feasible, what would be the best approach in JavaScript? ...

csssvg

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

incorporating additional lines into the datatable with the help of jquery

I am attempting to directly add rows to the datatable by assigning values in the .js file through the Metronic theme. However, despite displaying item values during debugging, the values are not being added to the datatable row array and thus not reflect ...

jqueryangularjsdatabasehtmldatatable

Customizing nested tables in your HTML email

When creating an HTML email template with nested tables for maximum email client support, the question arises about using inline styling. Should the style always be applied to the lowest level td, or is it possible to apply it to a parent table or td? For ...

htmlcssemail

Email replay feature

Having an issue with my email validation function. I found the code I'm using here: Repeat email in HTML Form not the same. Why? The problem I am facing is that if you incorrectly enter your email in the first input "eMail" and correctly in the seco ...

javascripthtmlemail

The Calibri Light font is not supported by Chrome version 37

Yesterday my website was working fine, but today when I checked it, some strange issues appeared. The Calibri Light font that I used extensively has been replaced with the default font, and the width of input fields has changed. How can I resolve this issu ...

cssgoogle-chromefonts