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

Adding input values to a jQuery Ajax POST request

I am currently attempting to send form values to a remote API using AJAX. The necessary information I require from the HTML form element includes the author, string, false, and true. At the moment, I have hard-coded some values but... function sendData ...

javascriptjqueryhtmlajax

Trouble with CSS display in Internet Explorer 8

My website located at this link is working perfectly in IE 10 and IE 11, however, any version lower than that is causing the content to be displayed on the far left of the screen instead of centering it. I have tried tweaking the CSS but can't seem to ...

cssinternet-explorer-8

Can you explain the significance of this %s value?

While going through some code, I found this: form method='post' input type='hidden' name='input' value='%s' I'm puzzled about the meaning of %s. I attempted to search online for an answer but couldn't fin ...

phphtml

Tips for customizing the md-select icon

I work with the angular-material framework and specifically utilize its <md-select/> component. I am interested in styling its icon: https://i.stack.imgur.com/g4pu1.png In the past, we would modify its css by targeting the class .md-select-icon, ...

cssangularjsmaterial-designangular-material

AngularJS Modal Button

After adding a button and writing the necessary code for implementing a modal in AngularJS, I encountered an issue where the modal was not displaying as expected. Below is the HTML code snippet that I used: <body> <div ng-controller="Mod ...

htmlangularjs

How can objects be positioned or moved in a linear fashion, and how to incorporate free fall when adding additional objects?

I'm interested in creating a system similar to a "vibrating table" with linear displacement. After studying various tutorials, I was able to achieve simulations based on the following examples: Following the tutorial "Authoring a Multibody Simulatio ...

htmlpython-3.xdrake

Creating dynamic div containers on the fly

I'm dealing with an issue in my application where multiple overlapping div boxes are being dynamically generated and they all end up having the same content. When I add content to a box, it gets applied to all existing boxes instead of just the last o ...

jquerydomhtml

Struggle with bringing the foreground image to the forefront not successful

Looking to create a web page with a full-page image overlap? I've been struggling with my current code as the image is not displaying properly. If anyone has any tips or advice, it would be greatly appreciated! HTML Code <html> <head> ...

htmlcss

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

javascripthtmldhtml

The issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

Currently, I am utilizing the Pagination component from Valor Software (click here to access). I am interested in adjusting the maxSize input dynamically based on changes in screen width. For reference, please see this example: Click to view example. It ...

javascripthtmlangularngx-bootstrap

The Elusive Key to Perfect Layouts and its Transformation

Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...

htmlcsslayout

Looking to create a form that automatically updates the second dropdown list when I make a selection in the main dropdown menu

<div> <label for="form-field-select-3">State : </label> <br /> <select class="chosen-select form-control" id="State" n ...

phpajaxhtmlcodeigniter

Tips on modifying the content of an element located within two iframes using the Chrome console

I'm trying to modify an element that is nested within two iframes. The issue I'm facing is that the Chrome console seems unable to locate the element. Is there a specific method to identify and target elements within nested iframes? document.quer ...

htmlgoogle-chromeselenium-webdriverdomgoogle-chrome-console

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

htmlcss

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

javascripthtmljquerycss

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Hey there! I'm currently working on creating a form with a map to select the country of birth using JVectorMap. However, when checking the Google Chrome developer console, I encountered the following error message: jquery-jvectormap-2.0.5.min.js:1 Err ...

javascripthtmlcssjvectormap

Widget being affected by centering CSS styling

My CSS centering code seems to be causing an issue with a widget, as it gets pushed down below the columns. Additionally, the nav bar widget appears on all forum pages. Your assistance in resolving this problem would be greatly appreciated. Thank you. Ch ...

htmlcss

Ways to modify CSS using JavaScript

Can anyone assist me with a custom CSS code that I found? It looks like this: header.type-2:not(.fixed-header) nav>ul>li>a{ color:#000; } I've been trying to change the color to #fff using JavaScript, but haven't had any success yet. ...

javascripthtmlcss

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

javascriptc#htmljqueryjson

invoking a JavaScript function from an HTML file

I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...

javascripthtmlnode.jswebserver