CSS background images not displaying

Post all HTML related questions here. No support.

Moderator: Project members

Post Reply
Message
Author
benroberts2986
500 Command not understood
Posts: 2
Joined: 2023-05-27 09:50
First name: Ben
Last name: R

CSS background images not displaying

#1 Post by benroberts2986 » 2023-05-27 13:11

Hi, total beginner and posting my first site using filezilla.

I can't seem to get the CSS background images to appear. I've worked out for the html images it was the file paths that needed a / to work but for the life of me i cant see why the CSS images wont load. The CSS is in the CSS folder in the attached structure image.

Attached is a screenshot of my folder structure in Filezilla and the code below is the CSS for the image. Hoping someone can help :(

Code: Select all

.header {
	width: 100%;
	height: 500px;
	background-image: url(./images/main-hero-image.png);
	background-repeat: no-repeat;
	background-size: fill;
	background-position: cover;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: start;
	padding: 30px 10% 30px 90px;
}

Code: Select all

.featured-items-cta {
	width: 1180px;
	padding: 50px 0;
	margin: 10px auto;
	align-self: center;
	background-image: url(/images/featured-item-background-garden.png);
	background-repeat: no-repeat;
}
Attachments
filezilla folder structure.PNG
filezilla folder structure.PNG (23.29 KiB) Viewed 3623 times

User avatar
boco
Contributor
Posts: 26913
Joined: 2006-05-01 03:28
Location: Germany

Re: CSS background images not displaying

#2 Post by boco » 2023-05-30 19:36

I don't know CSS very well, but maybe some things to check:

1. Web server filesystems are case sensitive (Windows is usually not). So, the file and path names need to be in the exact case.

2. Your second declaration uses an absolute path. use ./images/yadda or simply images/yadda. While it might work now with absolute paths, it definitely won't if you have to move the tree deeper into the directory structure.

3. According to a quick search, the path inside the brackets needs too be in double quotes.
No support requests over PM! You will NOT get any reply!!!
FTP connection problems? Please read Network Configuration.
FileZilla connection test: https://filezilla-project.org/conntest.php
FileZilla Pro support: https://customerforum.fileZilla-project.org

Post Reply