<h1>Backgrounds and Borders: Task 1</h1>
<div class="box">
  <h2>Backgrounds &amp; Borders</h2>
</div>
<hr>

<h1>Backgrounds and Borders: Task 2</h1>
<div class="box2">
  <h2>Backgrounds &amp; Borders</h2>
</div>
body {
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* Backgrounds and Borders: Task 1 Styles */
.box {
  width: 500px;
  padding: 0.5em;
  border: 5px solid black;
  border-radius: 10px;
  background-image: url(https://cdn.glitch.global/5ba9c390-f62e-4cf0-80e5-f51d6c39f911/balloons.jpg?v=1657984655341);
  background-size: cover;
}

.box h2 {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Backgrounds and Borders: Task 2 styles */
.box2 {
  width: 300px;
  padding: 0.5em;
  border: 5px solid lightblue;
  border-radius: 20px 0 40px;
  width: 350px;
}

.box2 h2 {
  padding: 0 40px;
  background-image: url(https://mdn.github.io/css-examples/learn/tasks/backgrounds/star.png),
    url(https://mdn.github.io/css-examples/learn/tasks/backgrounds/star.png);
  background-repeat: no-repeat, repeat-y;
  background-position: left center, right 4px center;
  /*   background-size: 12%; */
  text-align: center;
}

/* Task page
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders#task_1 */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.