Basic CSS text overlay on top of images

Question

Basic CSS text overlay on top of images

Hey there! I'm in need of some assistance with displaying text over an image. Specifically, I'd like the text to appear on the left side of the two people in the image and remain proportional when transitioning from desktop to tablet view using media queries.

Below is my HTML:

<figure><img src="Sources/USE/colors.png">

    <figcaption><h1>Your P<span class="orange">a</span>rtner in<br><br><span class="all"="colorstxt"><span class="green">C</span><span class="yellow">o</span><span class="orange">l</span><span class="red">o</span><span class="pink">r</span><span class="purple">s</span></h1></figcaption>

    </figure>

And here is my CSS code:

#hero_container figure{
    position: static;
}   

#hero_container figure figcaption{
    position: relative;
    top: 200px;
    left: 100px;
}

I've experimented with both absolute and relative positioning, but unfortunately, it causes other elements on the page to shift around below the image. If anyone has any solutions or suggestions for this simple issue, I would greatly appreciate it!

html css

Answer 1

Answer №1

Just a little more to go...

Don't forget to set the figure to have a position: relative; and make sure the caption is absolutely positioned.

#hero_container figure{
    position: relative;
}   

#hero_container figure figcaption{
    position: absolute;
    bottom: 10%;
    left: 10%;
}

Answer 2

Just a little more to go...

Don't forget to set the figure to have a position: relative; and make sure the caption is absolutely positioned.

#hero_container figure{
    position: relative;
}   

#hero_container figure figcaption{
    position: absolute;
    bottom: 10%;
    left: 10%;
}

Answer 3

Answer №2

By default, HTML elements are in static positioning. To have more control over the placement of a figure caption, consider using relative positioning on the figure element.

#hero_container figure{
position: relative;
}

Answer 4

By default, HTML elements are in static positioning. To have more control over the placement of a figure caption, consider using relative positioning on the figure element.

#hero_container figure{
position: relative;
}

Answer 5

Answer №3

By default, the position of an element is static. To properly position a figure, use relative positioning, and for the caption, use absolute positioning as shown:

#main_image_container figure{
    position: relative;
}   

#main_image_container figure figcaption{
    position: absolute;
    top: 150px;
    left: 50px;
}

Answer 6

By default, the position of an element is static. To properly position a figure, use relative positioning, and for the caption, use absolute positioning as shown:

#main_image_container figure{
    position: relative;
}   

#main_image_container figure figcaption{
    position: absolute;
    top: 150px;
    left: 50px;
}

Answer 7

Answer №4

Check out the updated code below:

HTML

<div class="picture">
    <img src="Images/placeholder.jpg" alt="" />
    <h2><span>Your Trusted<span class='space'></span><br /><span class='space'></span>Partner</span></h2>
</div>

CSS

.image {
   position: relative;
   width: 100%; /* required for IE 6 */
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
}


h2 span {
   color: white;
   font: bold 24px/45px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* default color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}

h2 span.space {
   padding: 0 5px;
}

Answer 8

Check out the updated code below:

HTML

<div class="picture">
    <img src="Images/placeholder.jpg" alt="" />
    <h2><span>Your Trusted<span class='space'></span><br /><span class='space'></span>Partner</span></h2>
</div>

CSS

.image {
   position: relative;
   width: 100%; /* required for IE 6 */
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
}


h2 span {
   color: white;
   font: bold 24px/45px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* default color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}

h2 span.space {
   padding: 0 5px;
}

Answer 9

Answer №5

Have you considered using a div with a float left and a higher z-index instead? It might be a more straightforward solution.

Answer 10

Have you considered using a div with a float left and a higher z-index instead? It might be a more straightforward solution.

Basic CSS text overlay on top of images

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What other option is there instead of using a span tag?

CSS - owl carousel automatically stretches images to full width

Splitting the string into individual characters using string.split("").map may cause layout issues on small devices

using CSS to position elements that are generated dynamically

Moving from one page to another

Turn off automatic compilation for LESS styling

What could be causing my mobile page to require two scrolls?

Responsive design is key in ensuring that Bootstrap columns adjust accordingly

Displaying a variable in HTML using PHP before it's actually declared

Retrieving inline CSS value using jQuery

Hiding a related field using a designated delimiter can be achieved with JavaScript

Modifying the href attribute of a hyperlink with jQuery

Transforming a datetime-local Element into a Date Object

Is there a way to access a CSV file containing a comprehensive list of days and months?

Implementing the right-to-left direction for several inline spans

Grab the SVG and resize it to a smaller scale

SCORM: moving between SCOs by clicking a button in the presentation

Creating an interactive Bootstrap 4 accordion with Vue.js: Step-by-step guide

Ways to create a scrolling effect for a datalist dropdown menu

Mastering Kendo UI in Vue: The Ultimate Guide to Managing Child Checkboxes in TreeView