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

Challenges with Image Placement and Alignment

Attempting to select an input field

Adjusting the size of an element in Angular JS as a textarea expands

Troubleshooting problem with spacing on three horizontal divs

Troubleshooting CSS Issues in ASP.NET Boilerplate

Hide a div when multiple classes are filtered using jQuery

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

htmlEnhance your webpage with a native-like combobox

How can I modify the HTML code for rooms in the HTML 5 client of the bigbluebutton application?

The HTML div element is not expanding to the full width of the screen on an iPhone device

Troubleshooting issues with JavaScript progress bar functionality

What prompts certain individuals to convert their asp.net pages into HTML pages before publishing?

Tips for setting the tabindex on an element that has an opacity of 0

Error: content within v-html directive not displaying as expected

Text aligned vertically within an element using the table-cell display attribute in the Chrome browser

Having trouble displaying a dynamically created table using jQuery

Utilizing useState for React Data Picker

Tips for opening a new browser tab

Displaying data from a PostgreSQL database to users based on their login username in Flask

How can I show the HTML text "<ahref>" in a UITextView on iOS?