Ways to place text over an image

Currently in the process of learning how to use CSS with HTML, I am experimenting with overlapping an image with text. Here is my current code:

<style>
  .aboutus_oven{
    background:url('Images/oventemp.jpg') no-repeat center;
    background-size: 100% 100%;
    height:760px;
    margin-top: 208px;
    position: absolute;
        }
</style>




<div class="aboutus_oven">
    <div class="aboutus_title">
        <h1> About Us</h1>
    </div>
</div>



.aboutus_title{
  margin-top:0px;
  margin-left: 65px;    
  position: relative;
  }

I am unsure if the issue lies in them both being under the same class. Could the specific margins specified within each class be conflicting with each other? I have included an image demonstrating what I am trying to achieve.

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

htmlcssimagetextoverlap

Answer №1

Take a look at this amazing fiddle: https://jsfiddle.net/yz8dt7us/

.home-banner{
    background:url('Images/banner.jpg') no-repeat center;
    background-size: cover;
    height:900px;
    margin-top: 150px;
    position: relative;
}
.home-title h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  height: 50px;
  top: -25px;
  margin: 0;
}

Answer №2

It seems like your about us title styles are not contained within the style tags. To better control the front or back layers, consider using z-index. Here's an example:

<!DOCTYPE html>

<html>

<head>

<style>
.textontop{
z-index: 10;
position: absolute;
top: 80px;
right: 200px;
font-size: 60px;
}

.imageonbottom{
z-index: 1;
}

body{
text-align: center;
}
</style>

</head>

<body>
<img class="imageonbottom" src="https://images.unsplash.com/photo-1602102317048-2be01617f96c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">

<p class="textontop">TEXT</p>
</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

Need help with setting up active buttons for dynamically added elements in jQuery?

I came across this example on adding a button dynamically using jquery and I have a question regarding it. How can I attach jquery functions to the newly created buttons after clicking on the "insert after" button multiple times? For instance, if I click ...

javascripthtmljquerydom-events

In IE8, dynamically loaded CSS does not take effect on dynamically loaded JavaScript views

Concerns have been raised about possibly duplicating this question, especially since it has taken more than an hour to find a solution. The current scenario involves: A widget that requires dynamic loading of CSS Usage of Sammy.js and .ejs for views, wh ...

cssajaxinternet-explorerinternet-explorer-8ie-developer-tools

Embrace the power of React using curly brackets!

Today, I made the decision to dive into learning React. Typically, I use Brackets for my coding environment. The first step I took was adding the necessary sources to my HTML code. <html> <head> <link rel="stylesheet" href="styl ...

htmlreactjs

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...

htmlcssgithub-pages

The specified CSS background image is not correctly aligned with the dimensions of the selector

I have multiple non-local images that I want to use as background images for classes with a width of 500px and height of 330px. Even though these dimensions are specified in the CSS properties for the class, the background: url('http://www.example.com ...

htmlcssimage

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

What is the best way to have a div created by JavaScript automatically expand to cover the entire screen after clicking on a dynamically generated table cell?

A unique interactive game inspired by Jeopardy is in the works. By clicking on a specific element within the game board, players can reveal questions fetched from the Jeopardy API. These questions are then presented elegantly within a dynamically created d ...

javascripthtmlcss

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

iphoneioscss

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...

javascriptcssmaterial-uicomponentssizing

Enhanced functionality for Thingworx using ThreeJS

I'm currently facing an issue while developing a 3 JS extension for Thingworx, specifically with the renderHtml function when working with a 3 JS canvas (Check out the code). //runtime.ts file renderHtml(): string { let htmlString = '<div ...

javascripthtmltypescriptthree.jsthingworx

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

If I have a dynamic array with 40 elements that changes on every render, how can I loop through the array and return 4 groups of elements, each containing 10 items without any repetition? I want to style these objects in the array using a parent flex con ...

javascriptcssreactjsarrays

Unable to display image in Angular 2

Hey there, I'm facing a simple problem. I'm having trouble displaying images in my Angular 2 app. This is how I am trying to add an image: <img alt="logo" [src]="'./images/logo.png'"> Do I need to install any specific package ...

imageangular

Instructions on how to change the color of specific text to red

Issue: While working on my testimonials page, I am facing a problem with displaying an "ADMIN" tag in red color instead of normal stars for one of the responses by an admin. I have tried various solutions like removing the ending p tag and adding quotes to ...

html

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

Using AJAX to dynamically load an image by setting the image path as the source of the image tag

I'm facing a challenge with my AJAX call that is used to display user details in a modal. I recently integrated an image upload feature for users, but now I'm struggling to display the uploaded image. I have tried looking for solutions online, bu ...

jqueryhtmlajaximage

Issue with HTML coding containing an embedded mail sending link

Having trouble with a link that contains '&' in the body text when trying to send an email. Here is the code: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <a href = "mail ...

html

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

I am attempting to create a simplistic layout using HTML/CSS, as depicted in the wireframe below: /------------------------------------------\ | | | header div | | ...

htmlcssxhtml

What is the best method for automating the transfer of data from a database to the user interface of a website using html and javascript?

As a volunteer coordinator for a non-profit organization, I have some basic experience working with Python. I am willing to dedicate fewer than 8 hours of learning time to my current project in order to automate certain tasks (or else I will do them manual ...

javascripthtmldatabasebrowser-automation