I’m trying to set a full screen background image for a silly cat site project using instructions from this W3Schools reference page https://www.w3schools.com/howto/howto_css_full_page.asp and it’s not showing up. Now sure what I’m doing wrong. The class styling for the background image right now is in style tags in the html doc but I also tried it in a separate style sheet.
It is always better if you give us the actual code instead of a screen shot.
My guess is that since you are using a file:// URL then this will only work from your own computer, so if you are running this from somewhere else then it won’t work.
I’m running this on the same computer where the photo is saved. Am I linking the photo incorrectly? I’m an apple user.
I don’t know. When you put that file URL into your browser does it show you the image? If not then you are not linking to it correctly. The URL ends in .html so it seems like you might be linking to a web page instead of an image.
It was linked wrong in the screenshot I posted but I’m still not able to get it to work. I changed the file name to spacecat.jpg. A previous time when I was having trouble linking an image using image tags I was told that since I’m a mac user I needed to right click the image, open it in the browser and then copy paste the whole resulting url link showing the pathway back into the img tag. It works when I’m just adding a photo in that way. I thought maybe that’s what I’m supposed to do here for this too but I don’t know if it’s supposed to be something different. It just gives me a white screen when I open the html doc in the browser.
Here’s what the code looks like now.
Floofs in space.background-image {
background-image:
url(“file:///Users/benjaminsexton/Desktop/HTML/Cat%20Website/spacecat.jpg”);
background-position: center;
position: relative;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
I don’t see anything obviously wrong here. Are you sure you want to use .body (the class) instead of body (the element)? Do you have the class background-image on the correct element? I’m just guessing here since you didn’t post your HTML.
Hi there!
Might be an issue with the path in url().
Try passing a random http link to an image to url() to test if it works.
Otherwise, here are some examples on using paths with url(): url() - CSS: Cascading Style Sheets | MDN
Maybe try passing a relative path iso absolute? If the image is located in the same folder as .html file, then it’s “./spacecat.jpg”
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.