html image in background

Here want to set html image in background and want to show some text over image.

First create a basic structure of html. Inside header tag include your data which you want to show.

Created a div with class text to contain text message.

Inside div there is one h1 and p element with content.

After creating basic structure, included google font (Optional) as per requirement of font you can include.

Copy google code of font and paste in html file in header section.

created a style sheet to place all css content in style.css in folder css.

HTML code is as below

To add html image <img> tag is used here we want to show image in background so we used background-image property.

In css file first set all elements margin and padding 0

Then set body elements font size 18px or as per your requirement.

To show image set background-image of header element.

To show html image in full width set width:100%;

To show html image centre use background-position: centre.

If you run it on browser it will show image with size of header(approx 50-60px height).

Next step is to show image with good height set it to 100vh (view port height)

To show image as cover set background-size:cover also set image in center by using property background-position:center.

To show text on another elements specified position set headers element position relative and text class position absolute.

Now image in on centre but text is at top. So set text at centre.

for text here text class is used.

To put content in middle set top:50% left 50%.

That will start text at center but text should be on centre so that use

transform:translate(-50%,-50%)

This will set text on exact centre.

Now format the h1 tag as specified above.

also format paragraph.

On displaying on browser, content is not not showing properly due to light image background for that we have created gradient in background before image. As below

To move content to left we reduce left to 35% on text class.

Run

Now it is perfectly looking great.

Categories CSS