Header Graphics

Update the Gulp build process to include images, and create image styles for the header.

Next video loading... 5
Get Code

Transcript

In this lesson we will add the header graphics.

As seen on the live example, we will be looking to add the starry night background and the unicorn graphic in this lesson.

But first, the current build process that we have in place - as in that part where when you run an npm commands it launches the site and builds it out - that build process is currently missing a way to handle for our images.

This file is the gulpfile that you may have noticed in the file directory. Right now is only handling for CSS files and our HTML files.

To do that, we can duplicate this HTML one and swap it out to say img. And instead of looking for a file type, we will look in the img directory.

img: {
  src: ["./src/img/"],
  dest: "./dist/img/",
},

Next we need to actually tell it what to actually do with that directory.

We'll copy our HTML section and swap out mentions of HTML to img.

/* IMAGES */
function images() {
  return gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest)).pipe(browserSync.stream());
}

Finally, in order to have the img directory be part of the watch process - in other words if we make changes to images this Gulp process should push it to our local server so that we can see those new images - we need to add it to the watch path. We will add it as the first item.

gulp.watch(paths.styles.src, style);

I have added 3 images for this lesson. Those can be found in the GitHub repository for lesson 8.

Now that we've enabled images, one swap we can also do in this lesson is to change our placeholder in the footer to our actual logo image. Instead of the placehold.it service, we'll look in our img directory for the logo. And on save, you'll see that we now have our nice rocket logo.

Okay lets' move on to adding the starry night background.

Previously, when working on the header we added this class of background-dark and that's where the current background color is coming from. For this lesson we want to update that and include a background image.

And for background image, we need to use the url() function. Just like when we added the logo, we will have it look in our img directory and this time choosing the starry sky.

header {
  /* ...existing styles */
  background-image: url("img/starry-sky.jpg");
}

On save you can see that this has been applied.

There's a couple more properties we'll add before we move on. The first one is background-repeat. We want to ensure that that set to no-repeat. If someone has an extra extra wide monitor they may see duplicate images of our starry sky.

Then we'll also add another property to help control background image sizing called background-size and for this will choose the value of cover. This means that the image will scale to fill the space without any distortion of its dimensions.

header {
  /* ...existing styles */
  background-repeat: no-repeat;
  background-size: cover;
}

You can see that on save, the image has been scaled proportionate to the available space.

Now with this image in place, the text has lost some of its legibility.

One trick we can use to improve this legibility is an inset box-shadow.

Properties in CSS have a painting order. The background image is painted under the box shadow. This will make sense as we add the box shadow property.

So let's add the box-shadow and using the inset property we can define that the shadow will spread to the inside of the header versus the outside as we did for the tour package cards.

Because we don't know how big the header will be and box-shadow requires a unit be used for dimensions - as in we can't just use 100% as that will have no effect - we will set it to be 100vw and 100vh to ensure coverage of the header area no matter the size.

The next property that we need is the color of the shadow. Just for a minute let's choose the value of black.

header {
  /* ...existing styles */
  box-shadow: inset 100vw 100vh black;
}

On save you can see that the header now appears to only have a black background. That is because the box-shadow was painted above the background-image.

Let's inspect our header and here we find the new style we've placed in. Instead of black, let's pick out the dark blue that we originally had, and then using the inspector we can change how the color is applied, and we'll select the rgba. You'll notice this has changed the property within the inspector.

Right now, rgb is giving us a solid value, but we can update to rgba which means we would like to use an alpha channel that lets us apply some transparency. This is applied as the last value and we'll choose 0.6.

Now you can see with the alpha channel set at 0.6, which is equivalent to 60%, we both have our blue box-shadow but also the starry sky image is visible from behind.

Now that we have our value picked up we can move it back into our code, so we will swap out this line.

header {
  /* ...existing styles, replace old box-shadow */
  box-shadow: inset 100vw 100vh rgba(21, 15, 100, 0.6);
}

The next thing we want to do as seen on our final project is to place the unicorn graphic.

For the Unicorn graphic, we will actually place it as an <img> tag, but prior to that step let's wrap our header content in a unique container to help with alignment. For this we will create a div and apply our existing classes of wrapper and center. As a reminder, this limits the max width and uses margin: auto to center the content. On save, we don't see a change in our visual since it is still the only element in the header.

Next we'll add our <img> for a unicorn graphic. We will be placing this as the last item in the header. This is because it has lower priority than our main content. So once we've placed our img tag we'll set the src to again look in our img directory and choose the unicorn graphic. As we know by now, we also need to add an alt attribute so that users of assistive technology can read out a value that's representative of the image. We'll simply set this to "unicorn graphic", and on save our unicorn has been added to the document.

<img src="img/unicorn.svg" alt="unicorn graphic" />

Now it's time to fix the alignment.

Let's start a new rule for header img. This is acceptable since it's the only image within the header element.

Now when looking at this at full-screen, what we want to do is have the image sit next to the content. The first way to begin fixing this is to go to the header and set position: relative;

header {
  position: relative;
  /* ...existing styles */
}

This now allows us to set position: absolute on the image and have this absolute positioning be relative to the header. Without this position: relative, the image would be relative to the entire body which would make for undesirable positioning.

header img {
  position: absolute;
}

With this change in place you can see that a strange effect has happened which is that the unicorn is now appearing to sit outside of the header. This is for two reasons: one, the header is not tall enough to contain its actual height. And due to absolute positioning it's seen as outside of the normal document flow, which means the browser is no longer able to compute its dimensions. So we have to create styles and let it know what those are.

Let's give the header a height property. We're going to set min-height: 50vh. This means at minimum the header will be 50% of the total viewport height.

header {
  /* ...existing styles */
  height: 50vh;
}

Now that we have enough height, we need to tell the image how to position itself. We will set:

header img {
  /* ...existing styles */
  bottom: 1vh;
}

Now the image has popped up into a good place. By default as you may have already noticed it is also aligned along the left edge.

However, if we start to resize the browser, the text collides with the unicorn because it stays at the larger size. To resolve this let's create some width and height properties for the unicorn image.

Since we set our hero to be a height of 50vh, and we've set the bottom already to be 1vh let's set a max-height property to be the remaining value which would be 48vh to also give it a bit of top padding. We'll also set a max-width and use 25vw. This means it will never be more than 25% of the viewport width.

header img {
  /* ...existing styles */
  max-height: 48vh;
  max-width: 25vw;
}

On save, we can already see that a resize has occurred and if we resize our browser even more we can watch the unicorn shrink to never exceed 25% of the viewport width.

And with that we have completed adding the header graphics for this lesson.

Next Lesson