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

Question

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

html css image responsive-design

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

Chrome and Firefox browsers are not supporting HTML simple anchor links

jquery event delegation doesn't function properly on statically rendered content

Dissipating visuals / Effortless website navigation

What is the best way to position this container in the center of the

Trouble with launching Semantic UI modal

What is the difference between a CSS background image and a default background?

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

Build interactive web pages using Python scripts

Executing functions in TypeScript

What is the best way to utilize $(target) within a directive?

Enhancing image clips using jQuery techniques

The functionality of Ng-Show is acting up

Troubleshooting issue with alignment in Material UI using Typescript

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

There seems to be an issue with the location.href function in the server-side code of

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

Challenge with organizing space within a nested layout of flexboxes and CSS grids

Employing jQuery for adding a class to the initial TD in every table row

When deploying a website with the default Hugo theme on Netlify, I encountered a strange issue where the webpage appeared blank. Sur

scraping text content from a CSS node using Scrapy