Assesment & Help Wanted for CSS Backgrounds & Borders 2

[abro]

Hello! I’d like some feedback on the 2nd task for the Backgrounds & Borders assessment (instructions here).

CSS code:
.box { border: 5px lightblue solid; border-radius: 20px 0px 40px; }

h2 { background-image: url(star.png), url(star.png); background-repeat: no-repeat, repeat-y; background-position: left center, right; text-align: center; }

HTML code:
<div class="box"><h2>Backgrounds & Borders</h2></div>

And a screenshot:

General comments definitely welcome, but also, the instructions explicitly said to make sure that the heading doesn’t overlay the image. It’s true my heading doesn’t overlay, but I didn’t have to do anything to get that to happen (and maybe something could go wrong with resizing?). How could I intentionally ensure no overlap?

[Ran]

This looks very good to me. Its been a while since I did this one. You have added the following code

text-align: center;

Without this the code I run locally shows the below image

With it on you get the image you shared. I realise that there in no need to complete every corner in the border-radius. BTW when you put in zero you dont need to add px.

Enjoy your studies

[Nikhil (Nikhil Jain)]

Hey,
You can add padding to the heading to make sure it doesn’t overlap with the other content.
All the best.

[juzeppejostko (ihaid00k@gmail.com)]

@abro

.box { border: 5px lightblue solid; border-radius: 20px 0px 40px; }

h2 { background-image: url(star.png), url(star.png); background-repeat: no-repeat, repeat-y; background-position: left center, right; text-align: center; }

Hi,

You can also use
tag before ‘&’ symbol as in the example.