Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

I'm trying to make the text adjust its center to the height of an image that changes size when the page is resized. Here's what I have so far:

HTML

<section id="eyeCatcher">
   <div id="catchContainer" >
       <div id="eyeCatchQuote">
        <h1>text</h1>
       </div>

       <span id="eyeCatchPhoto" role="img" >
           <span class="inner">
           </span>
       </span>
   </div>
</section>

CSS

#eyeCatcher{
   max-width: 1366px; 
   margin: 0 auto; 
}

#catchContainer {
   max-width: 1366px; 
}

#catchContainer #eyeCatchPhoto {
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   font: 0/0 serif;
   text-shadow: none;
   color: transparent;
   background-size: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

#catchContainer #eyeCatchPhoto .inner{
   padding-top: 60%;
   display: block; 
   height: 0; 
}

#catchContainer #eyeCatchPhoto{
   background-image: url("../img/overview.jpeg");
}

#eyeCatchQuote{
   margin-top: -26px; 
   position: relative; 
   top: 300px; 
}

Here is how it appears:

View large

Resize to small

htmlcssimageresponsive-design

Answer №1

If you want to center text on an image, consider using an actual image instead of a span with a background image. You can achieve the desired effect by using absolute positioning.

Here is an example of how you can achieve this using HTML and CSS:

<section id="eyeCatcher">
 <div id="catchContainer">
    <div id="eyeCatchQuote">
      <h1>TEXT ELEMENT</h1>
    </div>
    <img src="YOUR_IMAGE_URL" id="eyeCatchPhoto" role="img">
  </div>
</section>

The corresponding CSS for styling the elements would be:

#eyeCatcher {
  max-width: 1366px;
  margin: 0 auto;
}
#catchContainer {
  max-width: 1366px;
  position: relative;
}
#catchContainer #eyeCatchPhoto {
 width:100%;
}
#eyeCatchQuote {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: 0;
 transform: translateX(-50%) translateY(-50%);
}

You can also view a live demo in this JSFiddle link.

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

Discovering the initial element with a data attribute above zero using JQuery

I am working with a set of divs that have the class .item-wrap. At the moment, I am able to select the first div using this code snippet: $(".item-wrap:first").trigger( "click" ); Each .item-wrap element comes with a data-amount attribute. My challenge ...

javascriptjqueryhtml

The HTML and CSS layout is not displaying correctly as planned

I am currently working on a responsive webpage design project. Here is what I have been experimenting with: jsfiddle <div id="container"> <div id="one">#one</div> <div id="two">#two</div> <div id="three">#t ...

htmlcss

Determine the image's position in relation to its parent element while factoring in any vertical offset

Within my HTML, I have arranged two images to sit adjacent to one another. Interestingly, one image happens to be taller than the other. Despite assigning a CSS property of vertical-align: middle to both images, the result is that the shorter image appears ...

javascriptjqueryhtmlcss

What is the best way to transfer PHP data to an HTML tag?

I have a growing HTML file and a separate PHP document. The PHP document is responsible for fetching subscriber numbers and viewing statistics from my YouTube channel, and I need this information to be displayed in the HTML code. Here is the PHP script: ...

phphtml

How can I make sure that index.php displays the current page when I am navigating through categories on the WordPress

In my WordPress website, I have set up categories in the main navigation. Specifically, I have a category named "Home" which corresponds to category 4. To display the Home category (start page), I have added the following code to my index.php file: <?p ...

phpcsswordpress

Align a block vertically

Is there a way to perfectly center a div vertically? There are plenty of methods for horizontal alignment, but no matter what I attempt, getting vertical centering proves to be a challenge. body { vertical-align: middle;} No effect body {text-align ...

cssxhtml

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

htmlcssflexbox

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

javascriptcssangularjshtml

What is the best way to create transparency within an icon's background without affecting the surrounding box?

Is there a way to set the background color of the icon inside the circle without affecting the transparent box around it? Currently, when I use background:white, it changes both the circle and the surrounding box. ...

cssiconstransparencybackground-color

Troubleshooting problems with jqplot pie charts

Currently, I am utilizing jqplot to create pie charts. Despite following the example code provided in the jqplot documentation, I am encountering errors such as "e.jqplot is undefined." Below is a snippet of my code: <script src="jquery-2.0.3.js"> ...

jqueryhtmljqplot

What's the best way to align text at the center of this DIV?

I recently created a small offline website with a header that includes a logo, navigation bar, and notification bar. While I managed to align everything as intended, I encountered an issue with the text alignment within the notification bar (header-alert). ...

htmlcsscentertext-align

Instructions for adding a unique custom external CSS link, such as Bootstrap CSS, to a specific REACT component

Is it possible to incorporate custom CSS from the Bootstrap website into a React component? Since this CSS file cannot be imported directly, what steps should I take to include it? <link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap. ...

javascriptcssreactjs

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

Ways to distribute varied Responsive Images

Welcome to our website: .php .jquery .yii based Depending on the width of the viewport, we require at least two different infographic images. The client is very particular about w3c validation The picturefill solution does not pass validat ...

phpjquerymobileyiiresponsive-design

Issue with Xampp causing server side PHP script to malfunction

I attempted to execute a basic program that collects the user's name and gender from an html form, and then utilizes server-side scripting (php) to display the entered name and gender. Below is my html and php code snippet, with xampp control panel ve ...

phphtml

Guide to saving a Python docx file on the client side with the help of Ajax

I am currently using Python 3.6 with Django, and my code snippet is shown below: from docx import Document document = Document() document.add_heading('My docx', 0) document.save('myFile.docx') return HttpResponse(document, content_typ ...

pythonhtmldjangoajaxpython-docx

Determine the total number of active links on an HTML webpage using F#

Currently, I am working on developing a basic F# function that will be able to count the total number of links present in a given HTML website URL. I understand that this can potentially be achieved by counting the occurrences of the "<a" substrings, b ...

htmlwebweb-scrapingf#substring

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following : Implement a drop-down menu that reflects hierarchical parent-child relationships. Include a checkbox for each node to allow for selection. If all child nodes are selected, their parent node should be automatically ch ...

javascriptjquerycssdrop-down-menu

Having trouble with my React App compiling media files

I'm currently working with create-react-app and using a Data.js file where I define objects with properties that are spread as props in a tag. However, when I run npm start or deploy my application, the image doesn't show up. It seems like the co ...

javascriptreactjsimagewebpackcreate-react-app

Should data be stored in HTML5 using data-* attributes?

I have encountered a scenario like this: The screen contains numerous 'Rocks', each with attributes such as weight, points, and velocity. When a rock is clicked, its attributes are displayed. Currently, I have stored all the rocks' attribu ...

javascripthtml