@imadvv
Posted
Greetings Alexandru Stefan Gherhes!! Congratulations on completing This challenge!, 👏
The background images, a litter tricky on this challenge, but you can control it very easy with pseudo-elements on the body, I actually take some time to go trough your solution and, I did some fixes, Hope you found it useful
index.html, line 32
<div class="background">
<img src="/images/image-victor.jpg" alt="" />
</div>
we moved img to .background div to control it position with css, and also Notice that the path to images need to fix.
style.css line 52
body {
background: var(--dark-cyan);
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
body::after {
content: "";
position: absolute;
height: 50%;
width: 50%;
top: 0;
left: 0;
z-index: -1;
background-image: url(./images/bg-pattern-top.svg);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 100%;
}
body::before {
content: "";
position: absolute;
height: 50%;
width: 50%;
bottom: 0;
right: 0;
z-index: -1;
background-image: url(./images/bg-pattern-bottom.svg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
article {
/* margin: 50% auto; no need of all this margin*/
}
.background {
background: url(/images/bg-pattern-card.svg);
height: 130px;
/* max-width: 375px; */
border-radius: 10px 10px 0px 0px;
position: relative;
padding: 1rem;
}
.background img {
width: 30%;
position: absolute;
bottom: -3rem;
left: 50%;
transform: translateX(-50%);
}
.footer {
padding: 1rem 2rem;
}
h2 {
margin-block-start: 2rem;
}
/* now You can safely remove all this media query */
@media (min-width: 1440px) {
/* body {
background-image: url(/Profile-card-component-main/images/bg-pattern-top.svg),
url(/Profile-card-component-main/images/bg-pattern-bottom.svg);
background-position: top -320px left -330px, bottom -450px right -250px;
background-repeat: no-repeat, no-repeat;
} */
article {
/* margin: 300px auto; */
}
}
if you like and found this useful, you can play around with this code a take what work's well for you,
Over All Keep up The Good Work, and Have a Good Day/Night 👍
Marked as helpful
@AlexandruStefanGherhes
Posted
@imadbg01
I have just went over and applied what you suggested, and it works as it should.
I have not thought on applying pseudo elements on the body for the background images, now i see that is a good method.
Regarding the display:flex on body to align the content to center, i have also tried it and found it was squishing the div making it smaller width wise, and not finding a solution i opted for the margin 50% auto to compensate.
For the body::after when you specify background-size: 100%; it works fine for the desktop size, but when i resize it for mobile the picture is very small and not in the correct position, but applying background-size:cover seems to fix that.
Thank you for the help, i learned something new regarding the pseudo element for the body image.
@imadvv
Posted
@AlexandruStefanGherhes
Glad to hear that it was helpful!, and as a rule of dump that I follow, when I have a decorative element on the design, I use the pseudo element for it, because then I can split the decorative elements from the structure of the page, and have a clean workflow to follow. but over all Thanks for the feedback! am really happy to hear that you found our suggestion helpful.
