How to Float a Background Image Behind Text in HTML Using CSS

Save

Place images behind text in HTML files with cascading style sheets. Use CSS to place an image as the background for the entire page or in a smaller section behind a single <div>, <p> or other area with text.

Float text over tiled background images.
(Courtesy of Mozilla)
Step 1

Type the content for your page. Mark up the text with HTML using a basic text editor or using Web design software.

Type your text between <p> tags.
Courtesy of Microsoft
Step 2

Add the background image using the <style> tag and a CSS rule. In the <head> section of your HTML file, type <style>. Since the image is for the entire page, use CSS to style the body of the page. Add the background-image property followed by the value for the property, which is the URL of the image you want to use. In this example, the image is backgroundimage.jpg and, since it is stored in the same folder as the HTML file, the URL is simply a reference to the image name. For images stored in a different folder from the HTML file, the URL must include the directory path to the image.

Add the background image to the body of the page.
Courtesy of Microsoft
Step 3

Open your HTML file in a Web browser to test the effect.

The text floats over the background image.
Courtesy of Mozilla
Step 1

Type text that you want to float over a background image in an HTML tag for text such as <p>. To apply the background image to every <p> section on your page, add a class to the <p> tag like so: <p class="hasBackground">. To apply the background image to one specific <p> tag, add an id to the <p> tag like so: <p id="hasBackground">.

Add an id or class to the text tag that will have a background image.
Courtesy of Microsoft
Step 2

Add the background image using the <style> tag and a CSS rule. In the <head> section of your HTML file, type <style>. Use the id of the <p> tag as the selector for the CSS rule: #hasBackground. For a class used with several <p> tags, the selector is .hasBackground. Add the background-image property followed by the value for the property, which is the URL of the image you want to use. In this example, the image is backgroundimage.jpg and, since it is stored in the same folder as the HTML file, the URL is simply a reference to the image name. For images stored in a different folder from the HTML file, the URL must include the directory path to the image.

The rule applies to the <p> tag with the id "hasBackground."
Courtesy of Microsoft
Step 3

Open the HTML file in a Web browser to test the effect.

The text in the <p> tag floats over a background image.
Courtesy of Mozilla

Tips & Warnings

  • There are several ways to use CSS, including putting the style directly into the HTML tag instead of the <head> section of the HTML file and linking to a separate CSS file, thereby removing all styles from the HTML documents completely. Linking to a separate CSS file is advantageous because you can use a single style sheet for every page of your website and make many changes without having to edit every single HTML file that makes up your page. To link to a separate CSS file, place this tag in the <head> section of your HTML file.
  • <link rel="stylesheet" type="text/css" href="name.css">
  • Replace "name" with the name of your style sheet if it is in the same folder as your HTML files; otherwise, replace it with the directory path.
  • Match text size and color to background images carefully to make sure the text is readable when it floats over a colorful image.

References

Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!