Background-image

HTML-CSS
1

Hello, im trying to add a background image to a website but it has not been showing up so far, here is the full code to an example page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oopa</title>
</head>

<body background="url('C:\Users\User\OneDrive\Desktop\test\backgroundpicture.png')">
body
</body>
</html>
2

Hi! The problem lies in the way you are trying to add the background image in the <body> tag. The background attribute in the <body> tag is outdated and no longer supported in modern HTML specifications. Instead, you should use CSS to add a background image.

3

This isn’t working either…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oopa</title>
</head>
<style>
    body{
        background-image: "url('C:\Users\User\OneDrive\Desktop\test\backgroundpicture.png')";
        
    }
</style>

<body>
body
</body>
</html>
4

Remove double quote marks around url

5

This doesn’t still seem to work

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oopa</title>
</head>
<style>
    body{
        background-image: url('C:\Users\User\OneDrive\Desktop\test\backgroundpicture.png');
        
    }
</style>

<body>
body
</body>
</html>
6

Using C:\Users\User\OneDrive\Desktop\test\backgroundpicture.png in url() does not work in HTML because browsers cannot directly read file paths in this way. This approach works only in very specific setups and is not recommended.
Instead, you should move the image file to the same directory as your HTML file and use a relative path like 'backgroundpicture.png'.
In some cases, Windows-style paths (C:.…) need to be converted to forward slashes (/), which browsers understand better.

7

It works for the test page, but it doesnt work for the larger project im working on…

8

Double-check the path to your image relative to your CSS file. If your CSS file is in a separate folder (e.g., css/), adjust the path:
css:

background-image: url('../images/backgroundpicture.png');

.. moves up one directory.
Ensure the image is in the correct folder.
The browser may be caching your CSS. Force a refresh with Ctrl + F5 or clear the cache.
If your project is being served from a server (e.g., local dev server), confirm the image is accessible. Try opening the image in a browser directly via its URL.
Check if another CSS rule is overriding the background image. Use the browser’s Inspect Tool to see applied styles.