How To Apply A Background Image In Html

Download Article

If you desire to add together an image to a web page, all y'all need is HTML. If y'all'd similar to prepare an image as a groundwork to a web page, y'all'll need both HTML and CSS. HTML stands for Hypertext Markup Linguistic communication and is code that tells a browser what to show on a web page.^[1] CSS stands for Cascading Manner Sheets and is used to change the appearance and layout of a web page.^[2] You'll need a groundwork image that you'd like to use for your spider web page.

1
Create a binder to hold your HTML file and background image. On your estimator, create and name a folder that y'all can easily observe later.
- You can proper name the folder anything you like, but when working with HTML, it's all-time to get in the habit of naming files and folders with short, single word names that are recognizable.
2
Put the background epitome into the HTML folder. Put the image you'd like to use as groundwork into the HTML binder.
- If you aren't too concerned with ensuring your website will run well on older devices with slower cyberspace connections, yous should be safe in using a higher resolution image every bit your background. Simple images with light, repetitive patterns are also a practiced choice when deciding on a background image so that you can read any text on peak of it.
Tip: If you don't take an image, you can download a gratuitous background image. If you download an image, put it in the HTML folder y'all created.

Advertizement
3
Open up a text editor or HTML Editor. You can create an HTML file using a basic text editor app such as NotePad on Windows or TextEdit on Mac. You lot can besides utilise a what-you-meet-is-what-yous-get (WYSIWYG) HTML editor such as Adobe Dreamweaver.
- If you lot are using a WYSIWYG editor, click the selection to open up a new HTML file on the starting time of the page.
4

Click File . Information technology's in the bill of fare bar at the top of the page.
5

Click Save As (Notepad) or Salvage (TextEdit). It's in the file carte du jour below. If you are using a PC, click Save As in the "File" drop-down menu. If you are using a Mac, click Save in the driblet-downward menu.
6

Type a name for the HTML document. Generally, the outset page of a website is called "index", just you lot can the page anything you want. Type the name of the file in the text field next to "File Name".
7
Change the file blazon to an HTML document. If you lot are using a WYSIWYG editor, yous only need to save the file. If y'all are using NotePad or TextEdit to create HTML, use the post-obit steps to salvage the document as an HTML format.
- Notepad: Supercede the ".txt" extension at the end of the file name with ".html".
- TextEdit: Employ the drib-down menu next to "File Format" to select Wep page (.html).
8

Click Save . It's in the lower-correct corner of the window. This saves the text certificate as an HTML document.

Ad

1

Type <!DOCTYPE html> at the top of the HTML document. HTML code is fabricated up of open up and closed tags. Every well-written HTML page should starting time with <!DOCTYPE html>. This tells a web browser that the HTML file is an HTML file.
two

Write <html> in the next line. This is the opening tag of your HTML code. This tells the browser your HTML code starts here.
3

Type <head> in the side by side line. This is the opening tag for the Head of the HTML document. The head contains meta information that is not displayed in the web browser. This contains data such every bit the page championship, it also contains the Cascading Way Sheets (CSS) which format the look of the HTML code.
4

Type <title>Page Title</championship>. This is the HTML lawmaking that contains the page championship of your spider web page. The "<championship>" tag is the opening tag of the Page title HTML code. The "</title>" of tag is the closing tag. Supervene upon the text "Page Title" with whatever championship you want proper name your HTML page. This text will appear in the browser tab at the tiptop of the web browser.
5

Type </caput> in the side by side line. This is the tag that closes the head of your HTML certificate. If y'all wish to include any other information or manner sheets for your HTML document, be certain to write them after the "<head>" opening tag, and before the "</head>" endmost tag.
half-dozen

Type <body> in the next line. This is the opening tag for the body of your HTML certificate. The body is where all the visual elements of your web page go. This includes text, images, buttons, and other elements that are viewable on the web page.
7
Type <div style="groundwork-prototype: url('[image url]');"> in the next line. This is the HTML tag to add a background paradigm to your spider web page. Replace "[image url]" with the actual url location of the image you want to add together. This can be the location of an prototype that is uploaded to an online server, or the local location of an paradigm on your computer. ^[three]
- Alternatively, yous can use CSS to set an background epitome.
- When you employ a filename without a file path or URL (i.e, background-image: url("background.png");), the web browser will look in the spider web page folder for the named paradigm. If the file is in another folder on your file system, you'll demand to add the full path to that file.
8

Finish the balance of your HTML document. If you wish to include whatsoever other HTML elements on your spider web page, such as text, images, videos, links, buttons, etc, be sure to including them in the "Torso" section of your HTML certificate.
9

Type </body> in the last line. This is the tag that closes the body of your HTML document. When you are finished adding all HTML elements you desire to include in your document, type this tag on the concluding line.
10

Type </html> at the very end. This is the tag to close your entire HTML document. Blazon this tag on the last line.

Save the HTML file. When you are finished with everything, click File and so Save to save your work. Your entire HTML document should wait something like this:

                                                <!DOCTYPE html>                        <                        html                        >                        <                        head                        >                        <                        title                        >Folio Championship</                        championship                        >                        </                        caput                        >                        <                        trunk                        >                        <                        div                        style                        =                        "background-image: url('https://www.website.com/images/image_background.jpg');"                        >                        </                        body                        >                        </                        html                        >

1

Create an HTML document. Utilize the steps outlined in Part 2 to write an HTML document. Your HTML document should contain an open and closing HTML tag, an open and closing head tag, and an open and closing body tag. You do non need to include the HTML tag to add a background image. This part teaches you how to set a background prototype using CSS instead of HTML.
2
Type <style> in the caput of the HTML certificate. This is the opening tag for cascading fashion sheets (CSS). This tag goes after the "<head>" tag, and before the "</caput>" tag.
- Alternatively, you tin create your CSS on a separate CSS document and link it to your HTML document.
iii

Type body { in the next line. This is the opening of the CSS code that will style the torso of your HMTL document.
iv
Blazon background-paradigm: url('[image url]'); in the next line. This line specifies the background paradigm to be used. Replace the text "[image url]" with the actual url of the paradigm you lot want to utilize.
- When you apply a filename without a file path or URL (i.e, background-image: url("groundwork.png");), the spider web browser will look in the web folio folder for the named image. If the file is in another binder on your file system, yous'll demand to add the full path to that file.
5

Type background-repeat: no-repeat; in the next line. This line tells the web browser to simply display the image in one case, instead of repeating the epitome over and over again.
6

Type groundwork-size: cover; in the next line. This line tells the web browser to encompass the entire groundwork with the image.
7

Type } at the cease of the "Trunk" section of your HTML. If you wish to include any other CSS lines that impact the Trunk of your HTML document, exist certain to include them now. Blazon "}" in the last line of the "Torso" section of your CSS to close the body section.
8

Type </manner> at the stop of your CSS. When you are finished including all the CSS y'all desire to include, type "</style>" at the end. This tag closes your CSS.

Save the HTML file. When you are finished with everything, click File and then Save to save your work. Your entire HTML document should look something similar this:

                                                <!DOCTYPE html>                        <                        html                        >                        <                        caput                        >                        <                        title                        >Page Title</                        title                        >                        <                        way                        >                        torso                        {                        groundwork-image                        :                        url                        (                        "https://world wide web.website.com/images/image_background.jpg"                        );                        background-repeat                        :                        no-echo                        ;                        groundwork-size                        :                        cover                        ;                        }                        </                        style                        >                        </                        head                        >                        <                        body                        >                        </                        body                        >                        </                        html                        >

1

Right-click the HTML document. This displays a pop-upwardly carte du jour to the correct of it.
two

Select Open with . This displays a listing of applications y'all can open the HTML in.
3

Select the web browser of your choice. You tin open the HTML in any spider web browser.
4
Review the HTML file. Look over everything in the file and make sure everything looks correct.
- When the browser opens, if you see HTML code instead of the groundwork image, the HTML file may have been saved every bit a .txt or rtf file instead of an HTML document. You may want to try editing the HTML file in a different text editor.
Note: When the browser opens, if you don't come across the paradigm, make sure the image file name is spelled correctly in the alphabetize.html text editor window.
5

Make edits to the HTML file. In the text editor window, move the cursor betwixt the <torso> </body> tags, and and then type Hello world!. Reload the browser window to run into the text on tiptop of the background image.

Advertising

Add together New Question

Question

How practise I apply a groundwork image from a folder?

Make sure that the folder is in the aforementioned directory as the HTML, and then just blazon the path. If there was an image called "image1.png" within a folder named "folder," it would look like "/folder/image1.png.".
Question

How do I add a photo to an HTML document for the background?

By using the background-img=" " tag, nosotros tin insert an image in HTML. You can add a colored groundwork with the style aspect; for example, torso style="background:yellow".
Question

When inserting a background picture, practise I take to copy the URL from the binder location?

No. If the document and the background moving picture are in the same folder, you lot don't have to copy the URL.
Question

How practice I add a apparently color background to a web page?

In your CSS lawmaking, replace "torso{ background-image : ..." with "torso{ groundwork-color: ...". Where the .... is, put a hex, RGB, or HSL colour code. These can exist found at the w3schools colour picker site.
Question

How do I alter the background paradigm to fill the unabridged area instead of tiling the image?

Like this: style> { margin: 0; padding: 0; }. html { background: url("url") no-repeat center heart fixed; webkit-background-size: cover; moz-groundwork-size: cover; o-groundwork-size: cover; background-size: cover; }.
Question

How tin can I write text on the image?

Using an prototype editor to directly place text on the prototype would exist simplest.
Question

How practise I get a CSS code I apply when I desire the color to change when I'thousand moving the mouse?

Unfortunately, this is not operated by CSS. One way you could do this is with some JavaScript. There are various online tutorials you could use and multiple methods of doing this.
Question

How do I set a groundwork epitome using HTML code when the image is in a binder?

If the image is in a folder within the aforementioned folder your lawmaking is in, you lot tin utilize "/folder/paradigm.jpg" to navigate to it.
Question

What is the specific size of the paradigm to utilise for the website background?

At that place is really no specific size for a background paradigm, but the preferred size would be 300 x 100 pixels.
Question

What if I am using Cantlet?

It is the aforementioned, regardless of the text editor y'all utilise.

Testify more answers

Ask a Question

200 characters left

Include your e-mail address to go a bulletin when this question is answered.

Submit

Most This Article

Commodity Summary X

1. Upload the background image.
2. Open the HTML file.
3. Add the head of the HTMLdocument using the ' and ' tags. 4. Insert the and tags between the "Head" tags.
5. Add the body { element.
6. Add groundwork-image: url(" "); inbetween the Style tags/
7. Add together the full path to the image between the quotes.
eight. Add } at the cease of the body section of your CSS.
9. Save your changes.