Question 211700 in Html Question posted in
Some basic documentation can be found here.

Html – Issue with background-image: in css

I’m trying to add an image to the background of my website, and it isn’t seeming to work. (Code is lacking because I am trying to get this to work first.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div class="nav">
        <h4 class="nav-text">USER</h4>
    </div>
</body>
</html>

CSS

body {
    background-color:black;
    background-image: url("background.png")
}

.nav {
    background-color: black;
    opacity: 50%;
    height: 45px;
}

.nav-text {
    opacity: 100%;
    color: white;
    float: right;
    margin-right: 25px;
    margin-top: 12px;
}

What am I supposed to change to make it display the image rather than do nothing?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out it was an issue with my browsers cache, pressing CTRL + F5 fixed the issue.


  2. 0

    Really not sure what’s wrong with it but you can try adding a ‘;’ at the end of the background image in your css file although I don’t expect it to have much of an effect. You can also check to see if the path for your image is correct and/or ensure that your image is in the same folder as your css file and html file.

    Let me know if you were able to figure out what the problem was.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search