Add a Background Image to a Website: Step-by-Step Tutorial

PDF download Download Article
Add a fixed or tiled background image to a webpage with this user-friendly guide
PDF download Download Article

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.

Coding an HTML Background Image

Use the CSS property background-image: url("my_background.png"); to set your background image. Replace "my_background.png" with the location of your image, whether it's the full URL or the relative path on your web server. Make it cover the page with background-repeat: norepeat; and background-size: cover;.

Section 1 of 2:

Set a Web Page Background

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2627945-1-4.jpg\/v4-460px-2627945-1-4.jpg","bigUrl":"\/images\/thumb\/6\/6e\/2627945-1-4.jpg\/v4-728px-2627945-1-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/2627945-2-4.jpg\/v4-460px-2627945-2-4.jpg","bigUrl":"\/images\/thumb\/e\/ef\/2627945-2-4.jpg\/v4-728px-2627945-2-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/56\/2627945-3-4.jpg\/v4-460px-2627945-3-4.jpg","bigUrl":"\/images\/thumb\/5\/56\/2627945-3-4.jpg\/v4-728px-2627945-3-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This is the opening of the CSS code that will style the body of your HMTL document.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/86\/2627945-4-4.jpg\/v4-460px-2627945-4-4.jpg","bigUrl":"\/images\/thumb\/8\/86\/2627945-4-4.jpg\/v4-728px-2627945-4-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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"); .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/2627945-5-4.jpg\/v4-460px-2627945-5-4.jpg","bigUrl":"\/images\/thumb\/5\/59\/2627945-5-4.jpg\/v4-728px-2627945-5-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/2627945-6-4.jpg\/v4-460px-2627945-6-4.jpg","bigUrl":"\/images\/thumb\/1\/19\/2627945-6-4.jpg\/v4-728px-2627945-6-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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; .
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/2627945-7-4.jpg\/v4-460px-2627945-7-4.jpg","bigUrl":"\/images\/thumb\/f\/f3\/2627945-7-4.jpg\/v4-728px-2627945-7-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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]
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/2627945-8-4.jpg\/v4-460px-2627945-8-4.jpg","bigUrl":"\/images\/thumb\/c\/cd\/2627945-8-4.jpg\/v4-728px-2627945-8-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/2627945-9-4.jpg\/v4-460px-2627945-9-4.jpg","bigUrl":"\/images\/thumb\/2\/20\/2627945-9-4.jpg\/v4-728px-2627945-9-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Add this line before the </head> tag. This tag closes your CSS.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5c\/2627945-10-4.jpg\/v4-460px-2627945-10-4.jpg","bigUrl":"\/images\/thumb\/5\/5c\/2627945-10-4.jpg\/v4-728px-2627945-10-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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 
 >
    11. Advertisement
Section 2 of 2:

Background Tricks & Examples

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/2627945-11-4.jpg\/v4-460px-2627945-11-4.jpg","bigUrl":"\/images\/thumb\/0\/02\/2627945-11-4.jpg\/v4-728px-2627945-11-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Background images can be set for any HTML element, including paragraphs, headers, and more. In this example, we'll set a background image for the <p> tag, which makes it so all content in paragraph tags inherits the background image. In your CSS file, or within the <style></style> section of your HTML document, add a new CSS selector for the element you want to give a background image. In this example, we'll add a small background image at the center of the paragraph behind the text: <p> tag: 
     < 
 head 
 > 
 < 
 style 
 > 
 p 
 { 
 background-image 
 : 
 url 
 ( 
 "/images/my_background.png" 
 ); 
 background-position 
 : 
 left 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b6\/2627945-12-4.jpg\/v4-460px-2627945-12-4.jpg","bigUrl":"\/images\/thumb\/b\/b6\/2627945-12-4.jpg\/v4-728px-2627945-12-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    You can use CSS to change the size of your background in three ways: using the keywords cover or contain , by specifying a width value alone, or by specifying width and height values together.
    • background-size: cover; Scales the background image to cover the entire container without stretching or shrinking the image. The container can be the entire web page or any other element. This is most common when setting a background image for an entire web page.
    • background-size: contain; : This option scales the image to a smaller size to fit a container. [3] This option is useful if your background image is much larger than the container you're using it in. If the image is smaller, it will tile.
    • background-size: background-size: 150px 200px; : This option makes the background image 150px wide and 200px tall. The first measurement is width, and the second is height. However, length is optional—if you only enter the width, the height will automatically scale without stretching or warping.
      • You can also specify length and width in percentages.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/2627945-13-4.jpg\/v4-460px-2627945-13-4.jpg","bigUrl":"\/images\/thumb\/1\/16\/2627945-13-4.jpg\/v4-728px-2627945-13-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This property will help you position your background image relative to the container, which could be the page (if used in the body tag), or any other container. You can specify two values for background-position—the first is always the horizontal value. If you don't specify a vertical value, the default will always be 50%. [4] Some examples:
    • background-position: center; : Centers the background image.
    • background-position: top; : Aligns to the top of the element.
    • background-position: bottom; : Aligns to the bottom of the element.
    • background-position: left; : Aligns to the left side of the element.
    • background-position: right; : Aligns to the right side of the element.
    • background-position: right top; : Aligns to the right side and the top of the element.
    • background-position: center bottom; : Aligns to the center and the bottom of the element.
    • background-position: top 20px right 10px; : Aligns to the top with a 20px offset, and the right with a 10px offset. You can also specify the pixels as percentages.
    • background-position: 20% 60%; : Positions the background 20% horizontally from the left side, and 60% vertically from the top.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7a\/2627945-14-4.jpg\/v4-460px-2627945-14-4.jpg","bigUrl":"\/images\/thumb\/7\/7a\/2627945-14-4.jpg\/v4-728px-2627945-14-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Even if you're adding a background image to your page, it's always a good idea to set a background color as well. If the background image doesn't load, the user will see the background color you select. To do this, add the background-color: #FF33F0; , replacing FF33F0 with your preferred HTML color hex code .
    5. Advertisement

Community Q&A

Search
Add New Question
  • Question
    Hi! When I upload a background image I'm ending up with repeated copies. I just want a single image as background.
    wikiHow Staff Editor
    Staff Answer
    This answer was written by one of our trained team of researchers who validated it for accuracy and comprehensiveness.
    wikiHow Staff Editor
    Staff Answer
    Use "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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 2 Helpful 2
  • Question
    How do I apply a background image from a folder?
    Community Answer
    Make 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.".
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 96 Helpful 118
  • Question
    How do I add a photo to an HTML document for the background?
    Community Answer
    By 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".
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 52 Helpful 49
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • If the background image doesn't show up, you've likely uploaded the image to a location that's different than what you specified in background-image . If the image is not in the same folder as your HTML file, you will need to specify the path to the image rather than just the image name. For example, background-image: url("/images/my_background.png"); instead of background-image: url("my_background.png"); .
        Thanks
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Change the Button Color in HTML
      How to
      Run a HTML File
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Insert Images with HTML
      How to
      Write HTML Code
      How to
      Create an Email Link in HTML
      How to
      Create a Calculator Using HTML
      How to
      Resize iFrames in HTML
      How to
      Open HTM Files
      How to Copy HTML Source Code on Your Computer, iPhone, or Android
      Advertisement

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
      2. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
      3. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
      4. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 2,272,744 times.

      Is this article up to date?

      Advertisement