So, I’m using VS for practice on my personal project before I continue my learning path on Codecademy, and right now I want to set a background for my site. I keep using: background: url() and inside the url I paste the path of a picture I have saved on my laptop or one I got from Google, but nothing shows up.
1 Like
Give your project a folder inside a sites folder. Call it ‘site_one’ or whatever name you have for your project. Inside that folder create an images folder, and put all the images for your project in that folder. The ‘index.html’ page should be right alongside, just inside the project folder. Now all your images can be sourced from a relative location.
index.html
images {}
<img src="images/image.png" alt="">
or in CSS,
css {}
(from this folder)
body {
background: url(../images/bgd.png);
}
Bottom line, keep all your site material together and don’t traverse your hard drive (local volume) for resources.
1 Like
I’m still not getting the image I want as the background.
Can you show us your folder layout and the source HTML?
Where are the images stored? Where is the index.html file?
Two recommendations, turn on ‘Show extensions’ for your projects folders, and use short names for your internal folders.
+ Moon/
+ css/
- styles.css
+ images/
- bgrd.png
- index.html
1 Like
Your page is missing the <head> which is where the <link> element should reside, as well as the <title> element. Neither one of those elements should appear in the <body>.
<!DOCTYPE html>
<html lang="en">
<head>
<charset="UTF-8">
<title>Luna</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
</body>
</html>
Remember, do not traverse your hard drive, and keep all internal files relatively linked. Do not have spaces in your folder names, or file names.
1 Like
I took out the spaces in the names, but I still can’t get the image to become the background in css.
Did you create a HEAD, and populate it as shown above? If your project name is Moon, ALL the files for that project need to be inside the folder somewhere, and NONE of the files should be outside of that. Traverse the folder, only, not the hard drive.
Yes, but nothing’s showing as the background.
Please post your CSS, plain text, not a screenshot.
body {
background: url(“C:\projects\Moon\sites\images\BrightCrescent.jpg”);
}
Naughty, naughty, you are traversing the hard drive (C:).
The Moon project should be inside the sites folder, not the other way around.
The URL to the image from inside the CSS folder will be,
'../images/brightcrescent.jpg'
Another recommendation is to not use capital letters in URLs. Name everything in lowercase, only. If you must have spaces, use hyphenation.
You may also need to add a background-size: cover; property to fit the image to the entire window.
1 Like
So, I put everything in the sites folder, but it still won’t show as the background.
Are you using only relative linking? Moon and sites should not be in the URL.
Please show us your new folder structure, and your revised CSS.
1 Like
When I use relative linking my other images don’t show, this is my css for the background:
body {
background: url(‘…/images/brightcrescent.jpg’);
background-size: cover;
}
images should be inside the ‘moon’ folder. I would rename mooncss to just css.
<link rel="stylesheet" href="css/moon.css">
type="text/css" is redundant in HTML5; an unneeded attribute.
Note also, use web style forward slashes, not volume style backslashes.