Test your skills: Backgrounds and borders

Task 1

In this task, we want you to add a background, border, and some basic styles to a page header.

To complete the task:

1. Give the box a 5px black solid border, with rounded corners of 10px.

2. Give the <h2> a semi-transparent black background color, and make the text white.

3. Add a background image and size it so that it covers the box. You can use the following image:

   https://mdn.github.io/shared-assets/images/examples/balloons.jpg
   

Your final result should look like the image below:

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

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}

* {
  box-sizing: border-box;
}

.box {
  padding: 0.5em;
}

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

.box {
  border: 5px solid black;
  border-radius: 10px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-size: cover;
}

h2 {
  background-color: rgb(0 0 0 / 50%);
  color: white;
}

Task 2

In this task, we want you to add background images, a border, and some other styling to a decorative box.

To complete the task:

1. Give the box a 5px lightblue border and round the top left corner 20px and the bottom right corner 40px.

2. The heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right. You can use the following image:

   https://mdn.github.io/shared-assets/images/examples/star.png
   

3. Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.

Your final result should look like the image below:

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

body {
  padding: 1em;
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  width: 300px;
  padding: 0.5em;
}

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

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

h2 {
  padding: 0 40px;
  text-align: center;
  background:
    url("https://mdn.github.io/shared-assets/images/examples/star.png")
      no-repeat left center,
    url("https://mdn.github.io/shared-assets/images/examples/star.png") repeat-y
      right center;
}

• Previous
• Overview: CSS styling basics
• Next