Ways to show text on top of an image using CSS

Question

Ways to show text on top of an image using CSS

Seeking help! I'm attempting to overlay some text on top of an image, here's the link: http://jsfiddle.net/5AUMA/31/

The challenge is aligning this text to the bottom part of the image.

I've tried using this CSS:

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    vertical-align:bottom;
}

Unfortunately, it doesn't seem to work...

Any suggestions?

Also, I'd like this layout to be responsive to screen width. If the width is less than that of a 13" laptop, I want to remove the image but keep the text visible.

How can I achieve this?

html css

Answer 1

Answer №1

Here is a revised code snippet for you:

body {
    color: #202020;
    font-size: 100%;
    font-family: 'Maven Pro', sans-serif;
    line-height: 1.4em;
    min-height: 100%;
    background-color: #fdfdfd;
}

.head_img {
    margin-top: 10%;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align: center;
    position: relative;
}

.head_img p { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    bottom: 5px;
    margin: 0;
    padding: 0;
}   

@media (max-width: 1366px) {
    .head_img img { display: none; }
}

I updated the CSS by adding position:relative; to the .head_img class and positioning the p element absolutely with a bottom of 5px.

I also included a media query to hide the image when the screen width is less than 1366px. You may need to adjust this breakpoint based on your specific needs.

Feel free to check the updated fiddle here: http://jsfiddle.net/5AUMA/33/

Answer 2

Here is a revised code snippet for you:

body {
    color: #202020;
    font-size: 100%;
    font-family: 'Maven Pro', sans-serif;
    line-height: 1.4em;
    min-height: 100%;
    background-color: #fdfdfd;
}

.head_img {
    margin-top: 10%;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align: center;
    position: relative;
}

.head_img p { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    bottom: 5px;
    margin: 0;
    padding: 0;
}   

@media (max-width: 1366px) {
    .head_img img { display: none; }
}

I updated the CSS by adding position:relative; to the .head_img class and positioning the p element absolutely with a bottom of 5px.

I also included a media query to hide the image when the screen width is less than 1366px. You may need to adjust this breakpoint based on your specific needs.

Feel free to check the updated fiddle here: http://jsfiddle.net/5AUMA/33/

Answer 3

Answer №2

http://jsfiddle.net/5AUMA/32/

Your code was not properly structured as the paragraph should be within the same div containing the image.

<body class ="body">
    <div class ="head_img">
          <div style="text-align:center;"><img style="min-width:50%; min-height:60%;"  src = "http://i.imgur.com/H56PB85.jpg"/>

        <p> display this text over the image <br> and at the bottom part of the image</br></p>
              </div>
    </div>
</body>

Make sure to add position: relative; on the container div for consistent display across all browsers.

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position: relative; /* HERE */
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   bottom: 0;
    color: white;
}

Answer 4

http://jsfiddle.net/5AUMA/32/

Your code was not properly structured as the paragraph should be within the same div containing the image.

<body class ="body">
    <div class ="head_img">
          <div style="text-align:center;"><img style="min-width:50%; min-height:60%;"  src = "http://i.imgur.com/H56PB85.jpg"/>

        <p> display this text over the image <br> and at the bottom part of the image</br></p>
              </div>
    </div>
</body>

Make sure to add position: relative; on the container div for consistent display across all browsers.

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position: relative; /* HERE */
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   bottom: 0;
    color: white;
}

Answer 5

Answer №3

To get your css working properly, a few adjustments need to be made.

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   top: 0;--> Added
   color: white;--> Added
}  

.head_img{
    <--Margin Removed-->
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
}

SEE WORKING FIDDLE HERE

If you want the image to hide at a specific width, consider using media queries like this:

@media (max-width: 768px) {
    .head_img img{
        display:none;
    }
}

Answer 6

To get your css working properly, a few adjustments need to be made.

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
   top: 0;--> Added
   color: white;--> Added
}  

.head_img{
    <--Margin Removed-->
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
}

SEE WORKING FIDDLE HERE

If you want the image to hide at a specific width, consider using media queries like this:

@media (max-width: 768px) {
    .head_img img{
        display:none;
    }
}

Answer 7

Answer №4

Check out this custom CSS code snippet to style your webpage with a Maven Pro font:

body {
  color: #202020;
  font-size: 100%;
  font-family: 'Maven Pro', sans-serif;
  line-height: 1.4em;
  min-height: 100%;
  background-color: #fdfdfd;
}
.head_img {
  margin-top: 10%;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: bold;
  font-style: italic;
  color: #000000;
  text-align: center;
  position: relative;
}
.head_img p {
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 5px;
  margin: 0;
  color: #fff;
}

<body class="body">
  <div class="head_img">
    <div style="text-align:center;">
      <img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
    </div>

    <p>display this text over the image
      <br>and at the bottom part of the image</br>
    </p>
  </div>
</body>

Answer 8

Check out this custom CSS code snippet to style your webpage with a Maven Pro font:

body {
  color: #202020;
  font-size: 100%;
  font-family: 'Maven Pro', sans-serif;
  line-height: 1.4em;
  min-height: 100%;
  background-color: #fdfdfd;
}
.head_img {
  margin-top: 10%;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: bold;
  font-style: italic;
  color: #000000;
  text-align: center;
  position: relative;
}
.head_img p {
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 5px;
  margin: 0;
  color: #fff;
}

<body class="body">
  <div class="head_img">
    <div style="text-align:center;">
      <img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
    </div>

    <p>display this text over the image
      <br>and at the bottom part of the image</br>
    </p>
  </div>
</body>

Answer 9

Answer №5

Just made some changes

top: 394px;
color: #fff;

within the .head_img p section on this jsfiddle link

Answer 10

Just made some changes

top: 394px;
color: #fff;

within the .head_img p section on this jsfiddle link

Answer 11

Answer №6

body {
    background-color: #fdfdfd;
    color: #202020;
    font-family: "Maven Pro",sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    min-height: 100%;
}
.innerimg {
    background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
    border: 2px solid;
    height: 500px;
    width: 500px;
}
.head_img {
    color: #000000;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
.head_img p {
    display: table-cell;
    height: 480px;
    text-align: center;
    vertical-align: bottom;
    width: 500px;
}

<body class ="body">
    <div class ="head_img">
          <div class="innerimg" style="text-align:center;">
               <p> display this text over the image <br> and at the bottom part of the image</br></p>
              
          </div>
       
    </div>
</body>

Answer 12

body {
    background-color: #fdfdfd;
    color: #202020;
    font-family: "Maven Pro",sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    min-height: 100%;
}
.innerimg {
    background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
    border: 2px solid;
    height: 500px;
    width: 500px;
}
.head_img {
    color: #000000;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 500px;
}
.head_img p {
    display: table-cell;
    height: 480px;
    text-align: center;
    vertical-align: bottom;
    width: 500px;
}

<body class ="body">
    <div class ="head_img">
          <div class="innerimg" style="text-align:center;">
               <p> display this text over the image <br> and at the bottom part of the image</br></p>
              
          </div>
       
    </div>
</body>

Answer 13

Answer №7

Insert HTML elements

<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>

CSS Styling

h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

The code has been modified in this FIDDLe

Answer 14

Insert HTML elements

<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>

CSS Styling

h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}

The code has been modified in this FIDDLe

Ways to show text on top of an image using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Creating responsive divs on my webpage

Center text with font awesome symbols

Finding Elements in a Frameset in HTML with the Help of Selenium WebDriver

Determining the height of a Bootstrap column in relation to another element

Updating the chosen option using jQuery

Unable to alter the background color in a table row when a condition is verified

What is the process of performing numerical calculations using jQuery?

Emphasize a passage by clicking on a different section of text

Animate the centering of a DIV

Ways to showcase a div exclusively on UC mini browser

Having trouble getting the on:dblclick event to trigger on a row within a list using S

What is the best way to parse a JSON file and create a dynamic webpage using jQuery with the data from the

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

Arranging a Vertical Element Within a Rotated Holder

Determine the exact scroll position needed to reveal the element when scrolling in reverse

Duration of Animated Text

Error: myFunction has not been declared

Color in the diamond shape only to a designated height

Utilizing a Web Interface for Remote Monitoring of Windows Servers

Using array.map() in React does not display elements side by side within a grid container