Troube with Background Images CSS

Get Help CSS
#1

Hi all,

Having some issues with the background image pulling through to the index page after adding it to the CSS, any help would be greatly appreciated! Code below, issue is in the .service selector

strong text
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
color: bisque;
}

header {
display: flex;
height: 100px;
border-bottom: 3px;
border-color: white;
width: 100%;
align-items: center;
justify-content: center;
}

.navbar {
display: flex;
align-items: center;
justify-content: center;

}

li {
padding: 5px;
list-style-type: none;
display: inline-block;
}

.header h1 {
text-decoration: underline;
padding: 0px 5px;

}

.service {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url(Resources\group.jpg);
padding-top: 35px;
height: 700px;
width: 1200px;
}

.service img {
height: 700px;
width: 1200px;
}

.location{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 700px;
width: 1600px;
}

.location img {
height: 200px;
width: 300px;
}

.images{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 1400px;
}

.compass {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.team img{
height: 400px;
width: 300px;

}

.team {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
width: 1600px;
height: 700px;
}

.contact{
display: flex;
flex-direction: column;
align-items: center;

}

#2

Hey @isaachayes6360333132
Can you post your HTML and a screenshot of the File Explorer too, in this case it’s hard to help without seeing these

Ps: Ideally can you edit your post by using preformatted text for your code:

image

#3

Hi,
Using \ instead of / may be an issue (it may be treating as an escape character). You also should have a slash at the start.
i.e.
url(‘/Resources/group.jpg’)
(quotes are optional, but I prefer them. Looks a little clearer)

As we can’t see your path, have to assume the Resources folder is in the same folder you’re running the program from and group.jpg is inside that. If not, there’s your issue.

But, as @nab-sa suggests, using the widget to format your code helps a lot as somethings don’t display correctly so it’s harder to discern what is the issue.

Hope that helps.

#4

it wont allow me to post anymore code as there too many links in and I’m a new user :rage:

#5

In this case can you try to create a repository on GitHub and post the link here ?