'Cant change the background image with CSS

I'm just trying to change my background image on my website. I can change the background color but not the image. This is my first timeusing php so I don't know if I should know something there. Just been using HTML/CSS/JS. Appreciate the help!

style.css

body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-image: url("/img/indexbackground.png");
}

index.php:

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Quickbuy</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
phphtmlcssbackground-image


Solution 1:[1]

The issue is that you didn't put your CSS inside of a style tag.

You also didn't include </html>. That doesn't affect this issue, however it may cause issues with more complex webpages and older browsers.

Here is the updated code, in a snippet:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quickbuy</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-image: url("/img/indexbackground.png");
      background-color: #22d; /*Background color is being used to replace background image, remove it in your code.*/
    }
  </style>
</head>

</html>

CSS can't just be like this

element {
  color: red;
}
<!DOCTYPE html>
...

It must be in a style tag.

<!DOCTYPE html>
<html>
<head>
  <style>
    element {
      color: red;
    }
  </style>
</head>
<body>
...
</body>
</html>

Solution 2:[2]

Try this:

<style type="text/css">
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         background-image: url("/img/indexbackground.png");
    }

</style>

Otherwise there may be some syntax problems in your link. And don't forget to save your code after you changed it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Some guy
Solution 2

Related Questions