Design comparison
Solution retrospective
I rarely use image as my background, is making the page heavy and need more time to load. but this challenge force me to do it. seems i did a wrong code, i already look to other person work but it doesn't work on me. can someone help me to find where is the problem?
I also accept any critic or suggestion to improve my code in the future
Community feedback
- @madkn1311Posted over 2 years ago
Hello Ali,
You have designed the card quite well. :)
To fix the background you need to include the following code in the body.
body{ background-color: hsl(225, 100%, 94%); background-image: url("../images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: contain; }
-
You were using
background
instead ofbackground-image
property. Also, you have to be careful in setting the path of the image. In your case your css file is in a folder so that is why you have to set the path with../
as this states that the image is located in the folder one level up from the current folder. -
Using
background-size: contain;
ensures that the entire background image will fit the background area.
To center the card you need to include the following code once again in the body.
body{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
-
We use
min-height
instead of plainheight
because it enables responsive behavior and it will adjust according to the screen size. -
Also remove the media query since it is not needed in this case, instead add
max-width
to thecontainer class
as it also enables responsiveness and adjusts the size accordingly.
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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