CODEWITHSUNDEEP
htmlcssimage
Sara Nettle
Sara Nettle

Reputation: 31

CSS background image doesn't work when using local image

this is my first time posting. I apologize if this is a basic question but I am having the hardest time wrapping my head around what I could possibly be doing wrong.

So, I am trying to do something extremely basic. I simply want to stretch an image as the background for the body.

Here is my CSS.

body {
margin: 0;
background-image: url('../images/background.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center;
position:relative;
color: #fff;
font-family: Calibri, sans-serif;
font-size: 100%;
line-height: 1.5em;
}

Pretty simple. Now, when I pull any image off the internet and insert it in the URL for the background-image, it works perfectly fine. However, whenever I try using a local image, it doesn't work.

On this site I'm trying to make (for an assignment), I have the main folder with the index.php, then three sub-folders: css, js, and images. Obviously, I put the background image in the images folder. However, I have also tried moving the background,jpg to the css folder and simply putting in "background.jpg" and that does not work either.

Oh, and the image definitely works, as far as I know.

What am I doing wrong???

EDIT: here is my HTML for reference. I'm pretty much making an instant messaging box that connects to a mySQL server.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title> My Shoutbox Project </title>
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
    <script src="js/shoutbox.js"></script>
</head>

<body>
<div id="container">

  <header>
    <h1>My Shoutbox</h1>
  </header>
  <div id="shouts">
    <ul>
        <li>foobar</li>
    </ul>
  </div>
  <footer>
    <form>
        <label for="name">Name </label>
        <input type="text" id="name" maxlength="20">
        <label for="shout">Shout Text </label>
        <input type="text" id="shout" maxlength="140">
        <input type="submit" id="submit" value="SHOUT!">
    </form>
  </footer>

</div> <!-- close container -->

</body>
</html>

There's a lot more code, since I am running some PHP (to be honest, I don't quite understand the PHP at all... I'm slowly figuring this out.)

Upvotes: 3

Views: 2629

Answers (1)

Bindrid
Bindrid

Reputation: 3735

I copied hand pasted your code into my environment and it worked with out issue. My file arrangement:

http://localhost/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

If you have this arrangement 

http://localhost/shoutbox/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

you need to change 

<link rel="stylesheet" href="../css/main.css">

to

<link rel="stylesheet" href="/css/main.css">

(the single / tells it to go to the top level) or move images and css folders into shoutbox folder.

(Note, I am making some assumptions since I cannot see your full file structure)

Upvotes: 1

Related Questions