How to Create a Background Image in HTML (Complete+Image)

Have you ever made an HTML script? Usually this script is needed when you want to create a website. Because HTML scripts can set the appearance of a website.

Therefore, you must study HTML scripts well if you want to create a website with your own design and then host it.

One of the things that makes a website look attractive is the presence of a background on a website. Therefore, in this article I will explain how to create a background image using HTML.

How to Create a Background Image in HTML

There are several ways to create a background image using HTML. Some use CSS, dilus directly in the HTML script and so on.

For the tutorial to create a background using CSS, we need a CSS property, namely background-image, and within that property it has a value or walue, namely url(image_name.format). That is, in the url() it has the contents of the link and url of the image as well as the name and format of the image.

For example, if you have an image named flower.png and the file is still in one folder of the HTML script, then the background-image value can be filled with the url (bunga.png).

But if the image file is still in another folder, or not in the same folder as the HTML script, then there is an addition to the value of utl(). For example, if the image is in the folder background, then the value of the background-image is url(background/bunga.png).

That’s a little explanation about the properties of the background image, and below are some ways to create a background image using HTML.

1. The First Way

The first way is that you can make the background image directly inserted into the head tag and labeled with the style tag as well.

The script written is as follows:

body {background-image : url("abstract.jpeg"), url ("bunga.jpeg");background-color : #cccccc;}

After that you can run the script above by going to the menu Run and click Launch in Chrome.

2. Second Way

The second method is almost the same as the first method. You must first type the required tags in the HTML script. And then to display the background, you can type the script below.

body {background-image : url ("paper.jpg");background-color : #cccccc;}

You have to type the script in the style tag.

3. Third Way

In this third method, insert the background using CSS. as explained earlier, when creating CSS, the style tag must use the type property. Here the type must use text/css, as shown in the image below.

Then you can type this script inside the style tag:

After typing the script, then in the div tag for all parts of the body you must include the id by typing

.

4. Fourth Way

You can also create a background image using HTML by typing the background in the body tag. Here’s the script:

5. Fifth Way

The fifth way is that you can set it with various attributes. Here’s a script that you can type into an HTML file.

That’s a tutorial or procedure for creating a background image in HTML. Hopefully with this article, you can add your insight.

Just someone who loves to write and is interested in Technology. And people who always believe in the words ‘Effort will not betray Results’.

Share :