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:
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:
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>