Submitted about 1 year ago
Profile card component with html , css and bootstrap 5
@hsyigitoglu
Design comparison
SolutionDesign
Solution retrospective
Hello. I did it easily except the background images positions. I'm really hard worked on this background but I can't. Please can you tell me how i do this?
Community feedback
- @Arman001Posted about 1 year ago
Hi Good Work!
You can use patterns in your background on the body as below:
background-color: var(--DARK-CYAN); background-image: url('../images/bg-pattern-top.svg'), url('../images/bg-pattern-bottom.svg') ; background-repeat: no-repeat, no-repeat ; background-position: right 50vw bottom 50vh, left 50vw top 50vh;
For further details you can check my repository. Age Calculator GitHub
Regards #Saad
Marked as helpful0@hsyigitogluPosted about 1 year ago@Arman001 thank you very much. I couldn't remember the vw and vh properties
0@Arman001Posted about 1 year ago@hsyigitoglu you are welcome. For this purpose vh (viewport height) and vw(viewport width) can provide good solution because when width or height decrease or increases patterns go for and near accordingly.
0
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