@Drallas
Posted
Well done, i just finished this challenge myself this morning. Though It's a simple card component, it time consuming to get it right.
I noticed that you used transform: translate(-60%, -50%); to move to background in place. It works as need but it's not in the background but an image in 'the foreground'.
I opted for the CSS background-image: property, perhaps something you could experiment with if you are going to refactor this code. Otherwise good to know for a future challenge.
.container {
height: 100vh;
background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
background-position: left -44rem top -33rem, right -44rem bottom -32rem;
background-repeat: no-repeat, no-repeat;
}
@Kakamotobi
Posted
@Drallas Thanks for your feedback. I'm applying your feedback and refactoring my background portion. But between these what is the best practice?
- background css codes in <body> element.
- create a new div inside the <body> element wrapping the whole card to have the background css codes in.
@Drallas
Posted
@Kakamotobi
I created a .container class <main class="container"> that's where i put the background-image. Perhaps it can also be done directly on the body, but didn't try that. With a div it worked for me.
@Kakamotobi
Posted
@Drallas Thanks for your comment. I think it's better practice to do as you did than doing it directly on the body element.
