Backgrounds & Borders assessment help wanted

MDN
#1

Hello :slight_smile:

I’m attempting the 2nd task on this page link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders

I have the right css for the .box class I believe but for the h2 css I’m stuck. I’m unable to make the star show up on the right side as a repeating pattern. Also I’m not sure on how to make sure the text doesn’t overlay the image.

bckgrnd-2
bckgrnd-2850×910 36.2 KB

Would really appreciate any help.

https://jsfiddle.net/js81275n/

also here’s the link to download the star img: https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/star.png

#2

Hi @Ahmed1 and welcome to the community :wave:

Some hint:

  • You can use an absolute URLs to display the stars in your fiddle like this:
    background-image: url(https://github.com/mdn/css-examples/raw/master/learn/tasks/backgrounds/star.png);
  • If you want to use an image twice, you also need to put it twice in your CSS: background-image: url(star.png), url(star.png);
  • Alternatively you can use the background shorthand to put everything in one property: background: <image> <repeat-style> <position>, <image> <repeat-style> <position>;
  • Give your box an appropriate width (if you work in the fiddle)
  • At the end, add appropriate padding to h2 (all four sides) so that nothing overlaps and three stars are visible on the right

I hope those hints help you to improve your example. Feel free to ask more questions. I’m happy to help you :slightly_smiling_face:

Have a nice day!
Michael

1 Like
#3

Thanks for your reply and help with this, took your hints onboard and managed to make it look like it’s supposed to :slight_smile:

I didn’t know you needed to add the CSS twice to use images twice and I also forgot about absolute URL’s so that’s been really helpful <3

1 Like