Stuck on CSS Backgrounds and Borders 2

MDN
#1

image
image1008×619 20.5 KB

Stuck on this challenge,

Link here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders

everything else good, not sure how to get the star stack on right side to shrink down vertically so it is only three stars.

any suggestions?

CSS is as follows.
.box {

border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
background-image: url(star.png), url(star.png);
background-repeat: no-repeat, repeat-y;
background-position: 10px, 95%;
}

h2 {
width: 75%;
display: inline-block;
text-align: center;
padding-left: 40px;
}

#2

Hi @cpannella3 and welcome to the community :wave:

Try adding the background images to the h2. Then you could remove the width and fiddle with the paddings an background positions.

If you need more help just ask :blush:

Have a nice one,
Michael

1 Like