All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Text Over Image CSS Responsive

Last Updated : Mar 11, 2024

Text Over Image CSS Responsive

In this tutorial we will show you the solution of text over image CSS responsive, as we know css used to style html elements, here we used internal style method to show demo.

We inserted image on body of webpage with screen size over that we displayed text at center of page.

When we resize our browser window our layout design never get breaks and it adjust their layout depends on screen size.

Step By Step Guide On Text Over Image CSS Responsive :-

We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.

In our program we defined <h1> tag with one sentence.

Using body tag we inserted one image as webpage background with screen size.

Within body tag h1 sentence defined that will display on image then we sets it alignment to center of image and both layout designed as responsive manner so it can’t break at any point or any device screen size.

<!DOCTYPE html>
<html>
    <head>
        <title>TEXT OVER IMAGE</title>
        <style>
            body{
                background-image: url(bg.jpg);
                width: 100%;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            h1{
                padding-top: 20%;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Text Over Image</h1>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Within <style> tag we defined block of styles. First we inserted image to body tag using ‘background-image: url(bg.jpg);’ property, we sets its width to ‘100% of screen size’.
  5. Then ‘background-size: cover;, background-position: center;’ style properties used to sets background responsively and ‘background-repeat: no-repeat;’ property used to avoid repeated image.
  6. The ‘h1’ text ‘Text Over Image’ padding sets to ‘20% from top side’ and ‘text-align: center;’ property sets text to the center of page.
  7. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  8. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  9. Here we defined <h1> tag with text ‘Text Over Image’ then it is styled by as we seen at point 4.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to create text over image with css responsive.

When we load our program we can see responsive background image with one text displayed on webpage at center of page.

When we resize window screen size to any size our background image and text will responsively appeared so we can open this website on any device.

Using css try to explore more cool responsive webpage layout design with your own thoughts.

I hope this tutorial on text over image CSS responsive helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪