CSS background images not displaying
Posted: 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
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;
}