My background image isn't showing up

Hi! I am currently making a webpage, but my background image hasn’t been working. I have tried parenthesis, quotation marks, adding height and width attributes, different coding choices, and even different image formats. I still haven’t found the solution. Does anyone have an idea of what is going wrong?
I will put my code below. Please note that my website is still in progress, I just need to figure out what is going on with the background.

<!DOCTYPE html>
 <html lang="en">
  <head> 
   
    <title>Assignment 13 - Final assignment.</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  backround-image: url(C:\Users\Bronte Bennion\Documents\1.My website\SilverBackround.png);
  backround-color: #DBDEDD;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;  height: 626px;
  backround-width: 469px;
  backround-height: 626px;
  margin-top: 20px;
  margin-right: 25px;
  margin-bottom: 20px;
  margin-left: 25px;
  color: black;
}

div {
  background-color: #87CEFA;
  width: 100%;
  border: 5px solid black;
  margin: 10 px;
  padding: 7px;
}






/* Style the header */
.header {
  background-color: white;
  padding: 10px;
  text-align: center;
  border: solid 2px black;
  color: Blue;
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 48%;
  padding: 3px;
  margin: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:500px) {
  .column {
    width: 100%;

/* Create one column*/
.column2 {
  float: center;
  width: 97%;
  padding: 3px;
  margin: 10px;
}

/* Clear floats after the column */
.row2:after {
  content: "";
  display: table;
  clear: both;
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:500px) {
  .column2 {
    width: 100%;

.h1 { 
  font-family: "Lucinda Sans"; 
  font-size: 60px;
  font-style: italic;
  font-variant: normal;
  font-weight: 100;
  line-height: 26.4px; 
}

  
}
</style>
</head>
<body>


<div class="header">
  <h1>Bronte Bennion</h1>
</div>


   <br/>

<div class="row">

  <div class="column row">
    <h2>Column</h2>
    <p1>...</p>
  </div>
  
  <div class="column row">
    <h2>Column</h2>
    <p2>...</p>
  </div>

</div>

   <br/>

<div class="row2">

  <div class="column2">
    <h2>Column</h2>
    <p3>...</p>
  </div>
</div>



   </body>
</html>

Hi, brotebennion. Welcome to the forum.
Try putting quotation marks on the image source url. Or copy the image and paste on your project folder and link it. Like background : url("./images/image.jpg");

1 Like

Thank you, but I have already tried using quotation marks and linking the image hasn’t worked either.

Then try putting the image inside an image folder in the project folder. Like project/images/image. jpg. Then linking it on your CSS.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Try using an inline styling

1 Like

The spaces in the folder names need to be escaped and the path has to be in quotation marks. I think the path has to be relative for local files.
Assuming your main file (index.html) is in the folder 1.My website

background-image: url("./SilverBackground.png");

Use ../ to go up a folder if needed.

1 Like

Thank you! I am new and this was very helpful to know.

Thank you for the help, but my background is still not working. I will note this for future coding though.

Hi in the code you are given, there is a typo mistake.
It should be

background-image

and instead of giving full path of the image, you can also use relative path.

something like:

background-image: url(‘./assets/demoImage.jpg’);

Hope this solve your problem

Bronte, were you able to fix your issue?
Your name in a white box is on top I just didn’t cut that.
I worked on it a bit and added an image on my said and right now it looks like this.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.