Help wanted for CSS: Background and borders task 2

MDN Learn
#1

Hi,

I’m sorry for the lack of CodePen. I’m new here and I couldn’t figure out a way to link the embedded image file from the assessment (specifically star.png).

This is what I’m trying to replicate:
image

One of the requirements is that: I need to make sure that the heading text does not overlay the image, and that it is centered. This is my result:
theImage

Although not obvious I think there’s some overlapping going on between the heading and the background image.

Some of the things I tried were

  • Manually setting custom width of x for the .box so that the items are spread out evenly to avoid overlap, but I think this is a poor workaround
  • Setting margin left or right, but this does not seem to work in the header (does not work)
  • using display: inline-block for background images (does not work).

Thank you for any advice you might have!
CSS:

.box {
  border: solid lightblue 5px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 40px;
  }
h2 {
  background-image: url(star.png), url(star.png);
  background-position: right, left;
  
  background-repeat: repeat-y, no-repeat;
  text-align: center;
}

HTML (given):

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

Hi @qwerty and welcome to the community :wave:

You can use left and right padding on the h2. With the right amount it will look the same as the image.

Exact value padding: 0 40px;

Regarding images on CodePen. It’s not possible to upload images to it, but you can use the image URL from the MDN GitHub. When you click on Download the starting point for this task you can open the “backgrounds” folder. There is the “star.png”. When you click on it and then choose “Download”, you will see the URL in the address bar. This URL can be used in CSS.

background-image: url(https://raw.githubusercontent.com/mdn/css-examples/main/learn/tasks/backgrounds/star.png);

I hope that helps. :slightly_smiling_face:
Michael