Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Style the Background of the Feature Box Area

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next background we’re going to style on this professional services website is the background for the Feature Box area. And we do that by coming over to the feature box area background and choosing a background image.

Add Background Image

First we should say new media. Select the file and here it is. Except it’s way too big. This is one wasn’t updated. By that I mean that I haven’t made it the right size. You can see that the size it is right now, 5499 by 3541 is way too large. And that’s not really what I meant to upload.

Oh, here is the optimized one. Great. I’m just going to grab it there. I’d already uploaded it to the site and didn’t remember.

Crop Image If Needed

So we come back over and there’s our background image. Notice that the background image that I picked here was 1920 by 1236. You can get it to 1920 by 1080 which is probably the right size for this background image. So you could crop it down to 1080 if you wanted. But I’m just going to leave it as it is.


I’m going to position it actually “center top” rather than “center center” and I’m going to let it be fixed so it doesn’t scroll. Actually, no, let’s go ahead and do “center center”. Fixed so it doesn’t scroll. It doesn’t repeat. We don’t need to do anything about padding or anything like that.

Review the Background

So we save that and reload it. And there it is. And if we want to see more of this image than we are seeing right now we can go over to the feature box area page background. And see where it’s got padding? We could say 52 bottom padding and 26 top padding. And give ourselves more padding in that area. More top and bottom padding which is going to give us more image to see. So that’s our feature box area.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment