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");
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.
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 (’).
Try using an inline styling
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.
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
