Order summary component using HTML & CSS

Solution retrospective
I had issues displaying the background image. Any feedback will be appreciated. Thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @iyke-e
nice work Ralph your design is not in the center of the page to centralise you design you can use flexbox on the body to centralise something like body { display: flex; justify-content: center; align-item: center; }
Marked as helpful - @madkn1311
Hello Raph,
The design of your card looks great. :)
You need to include the following code in the body.
body { background-image: url("../images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: contain; }
-
Since your
css file
is in a folder, you have to set the image path with../
that states that the image is located in the folder one level up from the current folder. -
Using
background-size: contain;
makes the entire image fit to the background space.
Marked as helpful -
- @LuizaUszacki
Hi, @RalphJnr.
The background-image isn't showing because your "styles.css" is inside a folder. So, you have to add
../
at the beginning of your path (url) to go back a directory.The way you're doing it, it's trying to find a
images/pattern-background-desktop.svg
inside the folder "css".Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord