How to overlay text onto an image using CSS

Is there a more efficient way to overlay text on an image without using position: absolute;? Dealing with position: absolute; for different screen sizes isn't the ideal solution for me. I've searched for alternatives, but all I keep finding is the conventional advice: use position absolute.

HTML: 


<div class="header-container">
   <img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
        <p class="img-text">Make it possible!</p>
</div> 


CSS:


#header-container {
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-header {
  position: absolute;
  font-family: "Gayathri", sans-serif;
  font-weight: 1000;
  top: 45%;
  left: 45%;
}
cssimagetext

Answer №1

Here is an alternative approach,

incorporate the following styling for the image

#header-img{width:100%;height:auto;}

to center align text, use the following CSS code

.text-header{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


#header-container {
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
  position: absolute;
  font-family: "Gayathri", sans-serif;
  font-weight: 1000;
  top: 50%;
  left: 50%;
  color: white;
  font-weight:800;
  font-size: 30px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<div class="header-container">
   <img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
        <p class="text-header">Make it possible!</p>
</div>

Answer №2

Basically, no.

Nevertheless, it is possible to merge a text element with position: absolute inside a container with position: relative. By doing this, the element will be positioned absolutely (in terms of pixels or percentages) in relation to the parent container rather than the entire document.

To elaborate further, you could insert an image within this container (either as a background image or another div positioned absolutely), and utilize percentages to position your text relative to the container's dimensions.

#rel{
    display: block;
    position: relative;
    width: 400px;
    height: 600px;
}
img{
    width: 100%;
    height: 100%;
}
h1{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div id="rel">
    <img src="https://picsum.photos/400/600">
    <h1>Hello world!</h1>
</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

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

javascriptjquerycss

Ways to clear all CSS rules from a class without deleting the class itself using jQuery

Clear out all CSS properties within a class without actually removing the class itself using jQuery For instance : .ui-widget { font-family: Verdana, Arial, sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; left: 350 ...

jquerycss

display or conceal a div when a radio button is selected

I need a way to display a specific div containing unique text once a radio button is selected, while hiding all other div sections. <?php foreach ($items as $item){ $i=1; echo ' <div class="form-check"> <input class="fo ...

javascriptphphtmlcss

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

javascripthtmlcss

Center an image vertically in an AdminLte content-wrapper division

I am currently utilizing an AdminLte template as the framework for my design. In the designated area where I need to insert the main content, it is structured in the following manner: <div class="content-wrapper"> <se ...

htmlcsslaravelbootstrap-4

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

csstwitter-bootstrap-3

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

javascriptjqueryhtmlcsstwitter-bootstrap

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

Struggling to properly close the bootstrap tags

Having an issue where I can't seem to properly close Bootstrap tags in my code. Here's a snippet of the HTML: <html> <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.js ...

htmlcsstwitter-bootstrap

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

htmlcssmobileviewportportrait

Utilizing grid for JavaScript positioning on the website:

Hey there! I have a bunch of javascript files that I want to incorporate into my site using CSS grid. I have the code ready, but I'm a bit confused: Where exactly should I add the columns and rows in the .box-1 class to change its position? Addition ...

javascriptcsscss-grid

Setting the height to 100% on the body and html tags can lead to scrolling problems

After implementing the CSS code below, I have encountered some unexpected behavior: body, html{height:100%; overflow-x:hidden} Despite vertical scrollbars appearing as intended when the page exceeds screen height, detecting the scroll event on the body e ...

javascriptcss

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

css

The lower border is unresponsive in the CSS/HTML code currently in use

Currently diving into the world of Web Development, I find myself tackling the CSS part. My latest challenge involves adding a bottom border to an element, but no matter what I try, the border just won't show up. I've scoured resources for soluti ...

htmlcssweb-frontend

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

htmlcsshover