About Section Graphics

Transcript

In this lesson, we will be looking to add the stars graphic to the "About" section. the star graphic is now included in the code located in the GitHub repo.

If we look at our HTML that makes up the "About" section, you'll see that right now it is a section element within main. But we also have another section for the "Tour Packages", so we need a way to distinguish our styles for specifically the "About" section.

For this we we'll add an id attribute with a value of "about". It's important to note that using an ID as a CSS selector means the rule will have very high specificity, meaning it has extra power to overrule other styles that may have otherwise applied to this section.

Now we can begin our rule using the # which stands for "id" and our value "about".

#about {
}

Much like when we added the starry sky background, we will also add the stars as a background image. The first property will be background-image with our url pointing at our image directory and this time picking up the stars icon.

#about {
  background-image: url(img/stars-icon.svg);
}

And on save, the background stars are spread across the entire section. To resolve this, we will use the property background-repeat and set it to no-repeat.

#about {
  /* ...existing styles */
  background-repeat: no-repeat;
}

Now we see that our background has only one stars graphic, but we need to resolve the alignment. We would like it to be to the right and centered with the rest of the section content. So we will use the property background-position and the first value which is for the x-axis we'll use the keyword "right" and then for the y-axis will use the keyword "center".

#about {
  /* ...existing styles */
  background-position: right center;
}

And on save we have resolved our alignment.

Now it's time to fix the sizing. Similar to our header lesson, we will use the property background-size but this time instead of "cover", which would scale the stars to again appear like its flooding the background, we will use the value "contain".

#about {
  /* ...existing styles */
  background-size: contain;
}

"Contain" will allow the stars graphic to scale up within the bounds of the section without being cut off or losing its relative dimensions. However we haven't actually seen it grow. Why is that? Well, let's inspect.

Looking at our "About" section, the orange highlighted areas are due to our class here that's applying a margin. As we learned in the Foundations lesson about the "box model", margin is applied outside of an element. Therefore it is not a space that a background image can grow into. We'd like to retain this margin to maintain space between the "About" section and the header, as well as between the section and the "Tour Packages" section. But we'd like to add an additional class to create some padding and allow our image to grow a bit more

Moving down to the section of our styles located at the very end where we have the margin property that's already in use, let's make a copy to repurpose for our padding. We'll change all mentions of margin to padding.

.padding-v-lg {
  padding-top: 40px;
  padding-bottom: 40px;
}

And then in our HTML document, we'll add this new padding class alongside the margin one.

<section id="about" class="margin-v-lg padding-v-lg"></section>

And on save you can see the star graphic has scaled up because it is now fitting within the extra space afforded to the "About" section by the padding, which is highlighted in green.

In this lesson, we learned how to use background properties to align a background image with background position, and scale it while keeping its dimensions with background-position: contain. And we learned that background images can grow into padding, but not into space created by margins.