Member Avatar for janicemurby

hi my husband is customising a website template and wants to add content over a teransparent image but when he adds the tex it goes underneath how can he do this here is where the image is placed 

            `<div id="homepage" class="clear">`
            `<section class="main_slider"><img src="images/demo/1200x400.gif" alt="">`
            `</section>`

and a preview of image is in

there is currently no css for the div id home
or section class

if anyone has any ideas be much appreciated ty in advance jan x

Edited by Dani because: Moved to correct forum
  • 5 Contributors
  • 4 Replies
  • 781 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by anand9796

Dani AI

Generated

Short answer for : use the image as a CSS background or place a positioned overlay on top of the image. That avoids the DOM/stacking problems you saw. is right that a background-image is the cleanest pattern for decorative banners; ’s idea of baking text into the image (ImageMagick) still works for fixed art but is poor for accessibility and SEO. and are on the right track about positioning — here are two practical, modern patterns you can drop into the template.

HTML + CSS (recommended: background image + overlay)

<section class="main_slider">
  <div class="slide-content">
    <h1>Heading text</h1>
    <p>Supporting text</p>
  </div>
</section>
.main_slider {
  position: relative;
  background-image: url("images/demo/1200x400.gif");
  background-size: cover;
  background-position: center;
  min-height: 400px; /* ensure the section has height */
  color: #fff;
}

.main_slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* contrast for legibility */
  z-index: 0;
}

.main_slider .slide-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1.5rem;
}

Alternative (if you must keep an actual <img> tag)

<div class="image-wrap">
  <img src="images/demo/1200x400.gif" alt="decorative banner">
  <div class="overlay">
    <div class="overlay-content">Your text here</div>
  </div>
</div>
.image-wrap { position: relative; }
.image-wrap img { display: block; width: 100%; height: auto; }
.image-wrap .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }

Quick troubleshooting tips:

  • Give the container a height (min-height or an aspect-ratio) or the background will collapse to zero height.
  • If text is still hidden, check computed z-index and any transforms on ancestors (transforms create new stacking contexts).
  • Keep meaningful text in HTML (not baked into images) for accessibility and SEO; use alt for real <img> content.
  • Use a semi-opaque overlay (::before) to keep text readable over complex images.

These patterns are responsive and avoid the common pitfalls that cause text to sit under an image.

Recommended Answers

All 4 Replies

Member Avatar for anand9796 
<!DOCTYPE html>
<html>
<head>
        <title>ygfrnk</title>
        <style>
            .centered {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
        </style>
</head>
< body>
    <div class="container">
          <img src="img.jpg" alt="img" style="width:100%;">
          <div class="centered">center</div>
    </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.