Hello there,
I am not able to complete the second test and need help/assessment -
Below is the code I wrote -
CSS
.box {
border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
}
h2 {
display: flex;
}
.left {
padding: 10px;
background-position:
}
.right {
padding: 10px;
background-repeat: repeat-x;
}
HTML
But it doesn’t seem to work!
Kindly help!!
Hello @Azaz_Sayed
you doing great and you can solve it without flex just align the text in the h2 to be center and add 2 background image to box and one on right and another one on left the right one should be centered and the left one should be repeated veritcaly
you will need to use multi atterbuite like
check this also for how multi background work
hope that help and have a nice day 
Your class .left needs a value after the semicolon in background-position. Something like this:
Background-position: value-here;
Good luck!
Thank you so much, however, the effect is still different from the original. There is no gap between the text and the image, also if I put background image in box then it repeats 5 times instead of 3
.box {
border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
}
h2 {
text-align: center;
background-image: url(star.png), url(star.png);
background-repeat: no-repeat, repeat-y;
background-position: left, right;
}
Fixed now, not sure if this is the most efficient/robust way to do it-
If I added padding below background-image, it wouldn’t work, makes sense.
.box {
border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
}
h2 {
text-align: center;
padding-right: 30px;
padding-left: 30px;
background-image: url(star.png), url(star.png);
background-repeat: no-repeat, repeat-y;
background-position: left, right;
}
