How to make a text on top of div css năm 2024

0 with a class named “image-container” and add an image within it. Next, create another

    

        
        
Your text here
    

0 with a class named “overlay-text” and add your text inside.

    

        
        
Your text here
    

We know that in real-life scenarios, it’s unlikely for a web page to contain an image only. However, we’ll do this in this tutorial for the sake of simplicity. No matter if you’re overlaying the text on a banner, product image, or any other type of image on your website, it works similarly.

When you open the HTML file in a browser, it should look like this:

Next, we are going to style the page using CSS to overlay the text on the image. Create a CSS file named “style.css” and add a

    

        
        
Your text here
    

2 tag in the head section of the HTML file to link these two files.

    ...
    

This is the full code:

    
        
        
        
        
    
    
        

            
            
Your text here
        
    

CSS

We will add a black background to the text and position it at the center of the image using CSS. In the “style.css” file, add the code below to style elements with the relative classes:

.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}
.overlay-text {
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: 
# 000000; 
  color: 
# fff; 
  padding: 10px 20px; 
  font-size: 20px; 
  text-align: center;

You can adjust the properties of the

    

        
        
Your text here
    

4 class as needed to achieve the desired positioning, size, and appearance of the text. For example, you can change the value of

    

        
        
Your text here
    

5 to adjust the text size,

    

        
        
Your text here
    

6 to change the text color, and

    

        
        
Your text here
    

7 or

    

        
        
Your text here
    

8 to change the text’s position.

After applying the styles, the text should now be overlaid on top of the image, like the screenshot below:

🐻 View the complete code and result on CodePen.

While using CSS to overlay text on an image is easy as it doesn’t require any additional libraries or dependencies, your creativity could be limited. As the design gets more complex, so does the code. If you want to place the text in other positions, you would also need to find the perfect position by trial and error using different values.

Besides that, the overlaid text only stays on the web page. If you are overlaying text on the featured image of a blog post/article and want to use it as the Open Graph image (so that it appears on the preview when your share it on social media), it doesn’t do the job. This is what you’ll get—just the image itself:

In this case, you can use an image generation service like Bannerbear to add the text to the image instead of overlaying it using CSS. Bannerbear generates custom images based on a design template in which you can add static and dynamic images, texts, shapes, etc. And you can add a unique URL in your HTML code to generate it automatically.

Here’s how it works:

First, you will need a design template like the one below:

The template editor has a drag-and-drop interface and a panel on the right for designing the images, texts, and shapes. It makes designing and positioning the text on the image so much easier compared to styling using CSS.

Then, you can get a URL base to construct the unique URL for generating the image with the text on it automatically from the dashboard.

Here’s an example of the unique URL:

https://ondemand.bannerbear.com/simpleurl/vKJl40B6DjQkno2NDV/image/text_container/text/Your+text+here/image_container/image_url/https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80

…and you can learn how to construct it from this .

In the HTML code, replace the original image and the

    

        
        
Your text here
    

0 containing the text with the unique URL.

You should get a similar result:

Different from using CSS, the text will always be on the image. However, this method takes a longer time compared to CSS as you’re using an external API. So it depends on your project requirements to decide which one to use.

If you’re going to try Bannerbear, you can duplicate the template below:

🐻 Bear Tips: Change the text from "Your text here" to "hello" in the unique URL and open it in a new tab to see the magic happens!

If you’re not sure which one you should use, here’s a quick comparison between the two methods:

CSS

✅ Pros

• No external library/dependency: You don't need to use any third-party APIs or external services to achieve the result.
• Performance: Overlaying text on images using only HTML and CSS typically results in faster loading times compared to relying on external APIs for image generation.

❌ Cons

• Limited creativity: While you can produce many effects using CSS, you might be limited in terms of more complex visual effects or animations.
• Design complexity: Depending on the complexity of your design, overlaying text on images using CSS can become cumbersome and may require more code and effort to achieve the desired results.

✅ Pros

• Versatility: It offers a wide range of features and options for overlaying text, adding effects, and manipulating images. You can create more complex and visually appealing designs without extensive coding.
• Drag-and-drop interface: The drag-and-drop template editor makes creating different designs much easier as compared to styling using CSS.

❌ Cons

• External dependency: Relying on an external API means your application's functionality depends on the service’s availability and reliability.
• Cost: As it’s an external API, you will need to pay to use the service. However, it can save you more time when the design is complex.

Conclusion

Other than the examples that are mentioned previously, you can also overlay text on an image for other scenarios like adding customer testimonials or reviews on images to add credibility and authenticity to the content, adding text on images to create interactive elements, adding a watermark on images to establish branding and copyright ownership, and more.

These are just some of the ideas and you can unleash your creativity to use it in many more scenarios. Happy coding!

How to move the text to top in CSS?

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.nullCSS - Positioning - Tutorialspointwww.tutorialspoint.com › css › css_positioningnull

How do I position text in a div CSS?

For single-line text or images, you can use the following CSS properties:.

Set the parent container to text-align: center. This centers the child element horizontally within the parent container..

Use line-height: to center the child element vertically within the parent container..

How to vertically align text in CSS in a div?

The line-height property sets the height of a line box, which is the area that contains the text. By setting the line height equal to the height of the container, we can center the text vertically. Example: In this example, we set the height & the line height of the div container.26 thg 4, 2023nullHow to Vertically Align Text Within a Div in CSS ? - GeeksforGeekswww.geeksforgeeks.org › how-to-vertically-align-text-within-a-div-in-cssnull

How do you put a div on top of a div in CSS?

The z-index property of CSS can be used to overlay one div over another. Add z-index value to the div element with position attributes. The z-index determine the order in which div stacks.nullHow to Overlay One DIV Over Another DIV using CSS? - Studytonightwww.studytonight.com › css-howtos › how-to-overlay-one-div-over-anoth...null