Is there a way to position headline text behind another headline? Take a look at the image provided for reference

I need help creating headline text with a background image similar to the example below.

I tried using relative positioning on the first heading, but I can't seem to get it to work correctly.

If anyone can provide me with the code to achieve this effect, I would greatly appreciate it!

htmlcss

Answer №1

Check out this demonstration showcasing how you can control element stacking without using z-index in CSS. The order of element creation determines which one is on top.

https://jsfiddle.net/s2aqxfr9/

<div>
<h1 class="h1-back">
World!
</h1>
<h1 class="h1-front">
Hello!
</h1>
</div>

Below is the CSS code:


div {
  display:inline-block;
}

.h1-back {
  position:absolute;
  top:0;
  left:0;
  color:red;
  opacity:0.5;
  transform: rotate(-20deg);
}

.h1-front {
  position:absolute;
  top:0;
  left:0;
  color:blue;
}

Answer №2

Method 1

<div class="main">
<img src="img.jpg">
<h1>Title</h1>
</div>

.main{
position:relative
}
.main img{
position:absolute;
z-index:1;
}
.main h1{
position:absolute;
z-index:2;
}

Method 2:

<div class="main">
    <h1>Title</h1>
    </div>

.main{
background-image:url('path/to/img.jpg');
background-position:center;
background-repeat:no-repeat;
}

Answer №3

To center the second heading (or any other element), you must use absolute positioning.

Start by placing it in the middle of the top left corner, then adjust the position using transform: translate():

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) rotate(-12deg);

Remember that the element should have a parent with position: relative as a reference point.

.hero-section {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20vh;
  background-color: rgba(0,0,0,0.1);
  margin: 0 0 2rem 0;
  padding: 1rem;
}

.another-hero-section {
  position:relative
  background-color: rgba(0,0,0,0.1);
  margin: 0 0 1rem 0;
  padding: 1rem;
}


.special-heading {
  font-family: 'Amatic SC', cursive;
  font-size: 5rem;
  position: relative;
  line-height: 1;
  color: #333;
  margin: 0;
}

.special-heading span {
  font-family: 'Caveat Brush', cursive;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) rotate(-12deg);
  color: #127b9b;
  text-shadow: 10px 12px 11px #000000cf;
  font-size: 6rem;
}

.special-heading-foreground {
  font-family: 'Caveat Brush', cursive;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  color: #749b12;
  text-shadow: 10px 12px 11px #000000cf;
  font-size: 6rem;
  margin: 0;
  line-height 1;
}
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Caveat+Brush" rel="stylesheet">

<section class="hero-section">
  <h1 class="special-heading">Well, interesting background <span>Foreground</span></h1>
</section>

<section class="hero-section">
  <h1 class="special-heading">Another background</h1>
  <h2 class="special-heading-foreground">Heading&nbsp;2</h2>
</section>

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

Is it possible to include two functions within a single HTML script?

On my webpage, there are multiple tabs that display different sets of data. Below is the code for handling the functionality of these tabs: function openTab(event, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassNa ...

javascripthtml

Clicking a button in jQuery will automatically scroll to the far left

I am facing a challenge with my webpage where inline block divs are being appended each time a link is clicked, causing the total width to eventually go off the page (which is intentional). I would like to implement an animated scroll feature that automati ...

jqueryhtml

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful: <input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" /> Instead of achieving the desired ef ...

javascripthtmljquerycsshtml-input

Click on a button to send the React Router path as a parameter in

I've got a React form with a submission button like this: <Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}}> Search </Link> Within the ...

javascripthtmlreactjsurl-routing

Safari browser: Navigate with rtl/lrt direction

I created a webpage with right to left (rtl) direction. Below is the html tag I used: <html dir="rtl"> However, I needed two parts of the webpage to be written from left to right (ltr), so I added the dir attribute to this div: <div dir="ltr"&g ...

htmlcssright-to-leftbidi

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

javascriptjqueryhtmlajax

The dimensions of my textarea and input field are different

Just starting out with HTML and CSS here. I'm trying to use flexbox to create a form, but the width of my input fields and text area is off for some reason. Any ideas on what might be missing from my code? Thanks in advance! Here's the CSS I&apo ...

htmlcss

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

javascripthtmlreactjsmaterial-uiaccordion

Is it possible to utilize the identical Thymeleaf fragment modal on a single page, albeit with varying parameters?

I'm experiencing an issue with my website where I have cards with different headlines and content. When I click on a card, a modal should open with the specific text from that card. However, the problem is that the parameters from the first card are a ...

htmlspring-bootthymeleafbootstrap-5

Code for Rotating the Wheel - MINUS javascript

Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved Seeking references or examples to determine feasibility. ...

htmlcsshtml5-canvas

If the image is not found, deactivate the anchor or hyperlink

I am encountering an issue where I have an image tag within an anchor element setup as shown below: <a href='$image'><img alt='No Image' src='$image'></a> When the image is not available, I can still intera ...

javascriptjqueryhtmlimageanchor

Guide to modifying the background image color using CSS

Currently, I am attempting to modify the color of an image using CSS. This particular image is a key element in the layout of my website. To get a better understanding, you can view a screenshot of the element here: , and see an example post containing the ...

csswordpressstyling

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

javascriptjqueryhtmlcss

Turn off all the styles associated with a specific CSS selector

Looking for a solution to override CSS rules for the .lp-caption selector? .lp-caption { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; backgr ...

css

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss