This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.
This article has been viewed 2,220,361 times.
Learn more...
Want to learn the best way to add a background image to your website? Adding an image as your page's background is a little different than inserting an image into other areas of your website. Instead of using plain HTML code, you'll need to use CSS (Cascading Style Sheets). Fortunately, it's easy to set a background image on your website. This wikiHow article will walk you through setting your web page's background using HTML and CSS using simple examples. We'll also give you some more advanced tips and tricks for resizing and aligning your background image.
Things You Should Know
- Use the CSS property background-image: url("my_background.png"); to set your background image.
- Use the location of your image in place of "my_background.png," whether it's the full URL or the relative path on your web server.
- Make the background image cover the page using the properties background-repeat: norepeat; and background-size: cover;.
Steps
Set a Web Page Background
-
1Open your HTML document. You can use any text editor, such as Notepad++ or TextEdit, to edit your HTML file.
- If you haven't created your webpage yet, check out our guide to creating a simple website in HTML.
- If you prefer, you can also add your CSS code to a file that's separate from your HTML document. This involves creating a styles.css file for your CSS code, and linking it to your HTML document using the <link> tag. We'll focus this guide on adding the CSS directly to your HTML file, but check out How to Create CSS to learn how to create separate style sheets.
-
2Type <style> in the head of the HTML document. This is the opening tag for cascading style sheets (CSS), which should go between the <head> and </head> tags.
- Alternatively, you can create your CSS on a separate CSS document and link it to your HTML document.
Advertisement -
3Type body { on the next line. This is the opening of the CSS code that will style the body of your HMTL document.
-
4Type the code to set a background image. background-image: url("filename.jpg");. Replace filename.jpg with the path to the background image you'd like to use.
- If the background image is in the same folder as your HTML file, you can just use the file name of the image. For example, background-image: url("my_background.png");.
- If the image is on the web and not in the same folder as your HTML file, you'll need to specify the path to the image. This can be the full URL to the image. For example, background-image: url("https://www.wikihow.com/images/my_background.png");.
- You can also use the path to the image on your web server. For example, if you are editing the HTML file www.wikihow.com/mypage.html and your background image is at www.wikihow.com/images/my_background.png, you can set your background using background-image: url("/images/my_background.png");.
-
5Choose whether the background repeats or stays a single image. By default, if the background image is smaller than the page, it will automatically repeat itself. If you want the background image to only appear once, type background-repeat: no-repeat; on the next line.[1]
- If you do want the background to repeat, such as when you have a small image that you want to tile like wallpaper, you can replace no-repeat with other options:
- background-repeat: repeat;: Repeats the image horizontally and vertically, like a traditional wallpaper effect.
- background-repeat: repeat-x;: Repeats the image horizontally.
- background-repeat: repeat-y;: Repeats the image vertically.
- background-repeat: space repeat;: Repeats the image so it runs vertically along the left and right sides of the page, with empty space at the center.
- background-repeat: space;: Repeats the image on all four corners of the page with space between the images.
- If you do want the background to repeat, such as when you have a small image that you want to tile like wallpaper, you can replace no-repeat with other options:
-
6Make the background cover the entire page. If you chose not to repeat the background using background-repeat: no-repeat;, you'll want to make sure the background image covers the entire page, even if it's smaller than the frame. Otherwise, you'll see a bit of the page's background color around the edges of the background image. To do this, type or paste this code onto the next line: background-size: cover;.
-
7Choose how the background behaves when scrolling. If you want to keep the background fixed in place as the user scrolls through the page, you can anchor the background image to the viewport using the code background-attachment: fixed; on the next line.
- Alternatively, if you want the background to scroll along with other HTML elements like paragraphs and images, you can use background-attachment: local;.[2]
-
8Type } at the end of the "Body" section of your CSS. If you want to include other CSS code that affects the body of your document, such as setting font colors or centering your content, include them now. Then, type "}" below your last line of CSS to close the body section.
-
9Type </style> at the end of your CSS. Add this line before the </head> tag. This tag closes your CSS.
-
10Save 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 like this:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { background-image: url("/images/my_background.png"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } </style> </head> <body> </body> </html>
Community Q&A
-
QuestionHi! When I upload a background image I'm ending up with repeated copies. I just want a single image as background.wikiHow Staff EditorThis answer was written by one of our trained team of researchers who validated it for accuracy and comprehensiveness.
Staff AnswerwikiHow Staff EditorStaff AnswerUse "background-repeat: no-repeat;" followed by "background-size: cover;" in your CSS to make sure the background doesn't repeat and covers the entire page. -
QuestionHow do I apply a background image from a folder?Community AnswerMake sure that the folder is in the same directory as the HTML, then just type the path. If there was an image called "image1.png" inside a folder named "folder," it would look like "/folder/image1.png.".
-
QuestionHow do I add a photo to an HTML document for the background?Community AnswerBy using the background-img=" " tag, we can insert an image in HTML. You can add a colored background with the style attribute; for example, body style="background:yellow".
References
About This Article
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 background-image: url(" "); inbetween the Style tags/
7. Add the full path to the image between the quotes.
8. Add } at the end of the body section of your CSS.
9. Save your changes.