Assessment wanted for Backgrounds and Borders 2 skills

MDN Learn
#1

Just looking for an assessment on how i did on this skills test. Please and Thank You.

CSS

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

HTML

  h2  {
    text-align: center;
    padding: 0 35px;
    }

 <div class="box">
    <h2>Backgrounds & Borders</h2>
 </div>
#2

Hi @boknowpyro! I’ve checked this out, and it looks absolutely perfect. Well done.

#3

cool! thank you so much!!! :grinning:

#4

I thought that the h2 uses the image as a background? In the example by @boknowpyro the class box uses the image as a background and not the h2. He has the correct result but i think that the code isn’t the correct one for the task or am I false?

#5

yes, that’s right i also thought that it needs to be implemented in h1 tag selector. Still there is some useless code lines in boknowpyro code like the two first lines in .box{}, other than this it’s great :grinning: :grinning:

#6

Hi @MOD1 and welcome to the community :wave:

Yeah, you’re right. The idea was to use the background on the header element. But sometimes there’s more than one solution to solve a problem. :grin:

A more elegant way for the three stars on the right side would be to make use of background-repeat: repeat-y; instead of placing three individual stars. This is the reference solution which, in my opinion, is very clean code:

.box {
  border: 5px solid lightblue;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 40px;
}

h2 {
  padding: 0 40px;
  text-align: center;
  background: url(star.png) no-repeat left center,
    url(star.png) repeat-y right center;
}

Have a nice day,
Michael

2 Likes
#7

thanks @mikoMk, that would make more sense and as you said it’s elegant.

1 Like