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.
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
- 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.
- 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.
- 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
<!DOCTYPE html> < html > < head > < title > Page Title </ title > < style > body { background-image : url ( " " ); } </style> < / head > <body> </body> < / html > _ _ _ _
- 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
Look through the HTML file
- 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.
Understanding HTML code
Understanding CSS code
body { background-image : url ( "background.png" ); }
- 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 { }.
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 ;.
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: