You are viewing the article How to Set Background Image in HTML at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.
X
This article is co-authored by wikiHow writer Bailey Cho. Bailey Cho is the editor of wikiHow, currently living in Dallas, Texas. She has more than 2 years of editorial experience with articles that have been published in student and life publications. Bailey holds a bachelor’s degree in Advertising and a minor in Business from the University of Texas at Austin.
This article has been viewed 84,853 times.
If you want to add an image to your website, all you need is the HTML code. If you want to set an image as a background image for a web page, you need both HTML and CSS. HTML stands for Hypertext Markup Language, a type of code that tells the browser what to display on a web page. [1] X Research Source CSS is Cascading Style Sheets (roughly translated: Cascading style sheets), which are used to change the look and layout of a web page. [2] X Research Source You also need an image to set as your website’s background image.
Steps
Prepare files
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/42/2627945-1-1.jpg/v4-728px-2627945-1-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/4/42/2627945-1-1.jpg/v4-728px-2627945-1-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Create a folder to save HTML files and background images. On your computer, create and name a folder that you can easily find later.
- You can name folders as you like, but when working with HTML it’s best to get in the habit of naming files and folders with one short word.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a0/2627945-2-1.jpg/v4-728px-2627945-2-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/a/a0/2627945-2-1.jpg/v4-728px-2627945-2-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Save the background image to the HTML folder. Store the image that you want to use as the background in the HTML folder.
- If you are not concerned about your website loading slowly on outdated devices or on slow connections, you should choose to use high-resolution images for the background. Simple images with light colors and repeating patterns are also a good choice when deciding on a background image so that the user can easily read any text displayed above.
- If the wallpaper is not available, you can download it for free. After downloading the image, move it to the HTML folder you created.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e0/2627945-3-1.jpg/v4-728px-2627945-3-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/e/e0/2627945-3-1.jpg/v4-728px-2627945-3-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Create HTML file. Open a text editor and create a new file. Save the file with the .html extension.
- You can use any editor, including a pre-installed system program like Notepad (on Windows) or TextEdit (on Mac OS X).
- If you want to use a dedicated editor to write HTML, click here to download Atom, a text editor that works on Windows, Mac OS X and Linux operating systems.
- If you are using TextEdit, before you start writing the HTML file, click the Format menu and choose Make Plain Text. This setting will ensure that the HTML file is properly executed in the web browser.
- Word processors (such as Microsoft Word) are not suitable for writing HTML, as they add hidden characters and formatting that can damage the HTML file structure and the content will not be displayed properly. correct on the web browser.
Write HTML file
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d9/2627945-4-1.jpg/v4-728px-2627945-4-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/d9/2627945-4-1.jpg/v4-728px-2627945-4-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Copy and paste standard HTML code. Select and copy the code below, then paste it in the HTML file you created (index.html in this example).
<!DOCTYPE html> < html > < head > < title > Page Title </ title > < style > body { background-image : url ( " " ); } </style> < / head > <body> </body> < / html > _ _ _ _
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4e/2627945-5-1.jpg/v4-728px-2627945-5-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/4/4e/2627945-5-1.jpg/v4-728px-2627945-5-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Add the path of the background image. In index.html, find the line background-image: url(” “); . Move the mouse pointer between the parentheses, and then type the name of the image file as the background image. Don’t forget to include the extension of that image file (in this example, “background.png”).
- When done, the code will become:
background-image: url(“background.png”);
- If you use a filename but not a file path or URL, the web browser will look for the image name in the web page directory. If the image is located in another folder in the system, you need to add the full path of the image file. [3] X Research Sources
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/94/2627945-6-1.jpg/v4-728px-2627945-6-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/9/94/2627945-6-1.jpg/v4-728px-2627945-6-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Look through the HTML file
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/72/2627945-7-1.jpg/v4-728px-2627945-7-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/72/2627945-7-1.jpg/v4-728px-2627945-7-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Open the HTML file in a web browser. Right click on index.html and open the file with your desired web browser.
- When the browser is opened, if you don’t see the image, double check that the image file name has been entered correctly in the index.html editor window.
- When the browser is opened, if you see HTML code instead of a background image, the index.html file may have been saved in RTF (rich text document) format. Then you need to try editing the HTML file in another editor.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f2/2627945-8-1.jpg/v4-728px-2627945-8-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/f/f2/2627945-8-1.jpg/v4-728px-2627945-8-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Perform HTML file editing. In the text editor window, move the mouse pointer to the center of the <body> </body> tag and then type anything, such as Hello! . Reload the browser window, you will see the text above the background image.
Understanding HTML code
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6d/2627945-9-1.jpg/v4-728px-2627945-9-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/6d/2627945-9-1.jpg/v4-728px-2627945-9-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding HTML and CSS tags. HTML code is generated by opening and closing tags. The <body> tag is the opening tag of the main body and </body> is the closing tag of the main body. Every open tag on an HTML page needs to be closed for the page to display properly.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6e/2627945-10-1.jpg/v4-728px-2627945-10-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/6e/2627945-10-1.jpg/v4-728px-2627945-10-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding the DOCTYPE tag (standard text definition). Every properly written HTML page must begin with the <!DOCTYPE html> tag. This tag tells the web browser it is working with the HTML file.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/73/2627945-11-1.jpg/v4-728px-2627945-11-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/73/2627945-11-1.jpg/v4-728px-2627945-11-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Perform HTML file editing. In the text editor window, move the mouse pointer to the center of the <body> </body> tag and then type anything, such as Hello! . Reload the browser window, you will see the text above the background image.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/af/2627945-12-1.jpg/v4-728px-2627945-12-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/a/af/2627945-12-1.jpg/v4-728px-2627945-12-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding HTML and CSS tags. HTML code is to create opening and closing tags. The <body> tag is the opening tag of the main body and </body> is the closing tag of the main body. Every open tag on an HTML page needs to be closed for the page to display properly.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/9c/2627945-13-1.jpg/v4-728px-2627945-13-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/9/9c/2627945-13-1.jpg/v4-728px-2627945-13-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding title tags. The <title> tag is the text displayed in the title bar as well as the tab top of the browser window.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/2627945-14-1.jpg/v4-728px-2627945-14-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/37/2627945-14-1.jpg/v4-728px-2627945-14-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding formatting tags. The <style> tag marks up the CSS content. All content between the <style> tag is CSS code.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/eb/2627945-15-1.jpg/v4-728px-2627945-15-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/e/eb/2627945-15-1.jpg/v4-728px-2627945-15-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding content tags. Any content written between the <body> tag will also render as text, unless it’s HTML or CSS code.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/2627945-16-1.jpg/v4-728px-2627945-16-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/f/f3/2627945-16-1.jpg/v4-728px-2627945-16-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Perform HTML file editing. In the text editor window, move the mouse pointer to the center of the <body> </body> tag and then type anything, such as Hello! . Reload the browser window, you will see the text above the background image.
Understanding CSS code
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/5f/2627945-17-1.jpg/v4-728px-2627945-17-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/5/5f/2627945-17-1.jpg/v4-728px-2627945-17-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding CSS code. In the index.html file, the CSS code is located between the <style> tag and tells the browser to add a background image with a specific name within the <body> tag when the web page is displayed.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b2/2627945-18-1.jpg/v4-728px-2627945-18-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/b2/2627945-18-1.jpg/v4-728px-2627945-18-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Review the CSS code.
body { background-image : url ( "background.png" ); }
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/ab/2627945-19-1.jpg/v4-728px-2627945-19-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/a/ab/2627945-19-1.jpg/v4-728px-2627945-19-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding CSS code snippets. CSS formats are created in two parts: the selector and the declaration. [4] X Research Sources
- In this example, body is the selection and
background-image: url(“background.png”) is the declaration.
- A selection can be any HTML tag.
- The declaration is always between curly braces { }.
{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b4/2627945-20.jpg/v4-728px-2627945-20.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/b/b4/2627945-20.jpg/v4-728px-2627945-20.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,” bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Understanding CSS declarations. The CSS declaration consists of two parts, the property and the value. Inside curly braces,
background-image is the attribute section and url(“background.png”) is the value. [5] X Research Sources
background-image is the attribute section and url(“background.png”) is the value. [5] X Research Sources
- The attribute section describes what is being formatted, and the value section shows how the attribute is formatted.
- Attributes and values are always separated by a colon :.
- CSS declarations are always terminated with a semicolon ;.
X
This article is co-authored by wikiHow writer Bailey Cho. Bailey Cho is the editor of wikiHow, currently living in Dallas, Texas. She has more than 2 years of editorial experience with articles that have been published in student and life publications. Bailey holds a bachelor’s degree in Advertising and a minor in Business from the University of Texas at Austin.
This article has been viewed 84,853 times.
If you want to add an image to your website, all you need is the HTML code. If you want to set an image as a background image for a web page, you need both HTML and CSS. HTML stands for Hypertext Markup Language, a type of code that tells the browser what to display on a web page. [1] X Research Source CSS is Cascading Style Sheets (roughly translated: Cascading style sheets), which are used to change the look and layout of a web page. [2] X Research Source You also need an image to set as your website’s background image.
Thank you for reading this post How to Set Background Image in HTML at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.
Related Search: