To add an image to a web page, you need HTML, and to add an image to the background of a web page, you need HTML and CSS. HTML (Hypertext Markup Language) is a standardized document markup language that tells the browser what to display on a web page. CSS (Cascading Style Sheets) is a document appearance description language that is used to change the appearance and layout of a web page. You will need an image that you set as the background of your web page.
Steps
Part 1 of 5: How to create a folder and file
Step 1. Create a folder to store the HTML file and background image
Give the folder a name that makes it easy to find.
The folder name can be anything, but it is better if it consists of one short word
Step 2. Copy the background image to the created folder
- If you don't really care about how your site will open on older devices or on devices with slow internet connections, use a higher resolution image. An image with a simple repeating pattern is also suitable as a background, because the text will be clearly visible on it.
- If you do not have an image, download it for free on the Internet and copy it to the created folder.
Step 3. Create an HTML file
Open a text editor and then create a new file. Save it as index.html.
- You can use any text editor such as Notepad on Windows or TextEdit on Mac OS X.
- If you want to use a text editor designed for HTML, download the Atom editor, which supports Windows, macOS, and Linux.
- If you are using TextEdit, before you start writing HTML, open the Format menu and choose Convert to Plain Text. In this case, the HTML file will load correctly in the web browser.
- Powerful text editors such as Microsoft Word are not well suited for writing HTML code because they add invisible characters and formatting that can prevent the content of the HTML file from displaying correctly in a web browser.
Part 2 of 5: How to Write HTML Code
Step 1. Copy and paste the standard HTML code
Highlight and copy the HTML below, and then paste it into the open index.html file.
Page title
Step 2. Add the URL for the background image
In the index.html file, find the line background-image: url (""); … Place the cursor inside the parentheses, and then enter the name of the background image file. Be sure to include the file extension for the background image.
The specified line should look something like this:
background-image: url ("background.png");
If you just enter the name of the file (without its URL or path), the web browser will look for the picture in the folder with the HTML file. If the image is located in a different folder, enter the full path to the file.
Part 3 of 5: How to View an HTML File
Step 1. Open the HTML file in a web browser
Right-click the index.html file and open it in your chosen web browser.
- If the desired picture does not open in the browser, in the text editor window, check if the name of the file with the image is entered correctly.
- If the web browser displayed HTML instead of a background image, the index.html file was saved as an RTF document. In this case, edit the HTML file in another text editor.
Step 2. Make changes to the HTML file
In the text editor window, place the cursor between the tags and type "Hello world!" Refresh the page in the browser so that the entered text is displayed in the background of the picture.
Part 4 of 5: How to understand the HTML code
Step 1. Remember what tags are in HTML and CSS
HTML code consists of opening and closing tags. For example, the tag is opening and it is closing. Each start tag must have a corresponding end tag for the web page to load correctly.
Step 2. Remember the DOCTYPE tag
Good HTML should start with. This tag tells the web browser that the HTML file is an HTML file.
Step 3. Make changes to the HTML file
In the text editor window, place the cursor between the tags and type "Hello world!"Refresh the page in the browser so that the entered text is displayed in the background of the picture.
Step 4. Remember what tags are in HTML and CSS
HTML code consists of opening and closing tags. For example, the tag is opening and it is closing. Each start tag must have a corresponding end tag for the web page to load correctly.
Step 5. Remember the tag
It contains the text that appears in the title bar of the browser window, as well as the text that appears in the browser tab.
Step 6. Remember the tag
It points to the content of the CSS. Everything between the tags is CSS code.
Step 7. Remember the tag
Any text between tags will display as entered (unless it's HTML or CSS).
Step 8. Make changes to the HTML file
In the text editor window, place the cursor between the tags and type "Hello world!" Refresh the page in the browser so that the entered text is displayed in the background of the picture.
Part 5 of 5: How to Understand the CSS Code
Step 1. Understand the CSS
In the index.html file, the CSS between the tags directs the web browser to a named background image that appears between the tags.
Step 2. Review the CSS code. 3
body {background-image: url ("background.png"); }
Step 4. Memorize the parts of the CSS code
CSS styles have two parts: a selector and a declaration.
In our example, body is a selector and
background-image: url ("background.png") is an ad.
The selector can be any HTML tag.
Declarations are always enclosed in curly braces {}.
Step 5. Remember what a CSS declaration is
A CSS declaration has two parts: properties and values. Content in curly braces
background-image is a property and url ("background.png") is a value.
The property describes the item (in our example, this is the background image), and the value is the style of the item (in our example, this is the image file).
The property and value are always separated by a colon (:).
CSS declarations always end with a semicolon (;).