Reduce height of background image

Highlighted
Occasional Contributor

Hi there,

 

I am hoping to reduce the size of the background/header image on my site's blog and landing pages. It takes up a lot of room, and users have to scroll to see the rest of my content. 

 

Can anyone provide guidance on how to reduce the height?

 

Blog: http://go.spotlightar.com/blog

CSS: https://app.hubspot.com/beta-design-manager/3419301/code/5878941035

 

Thanks!

Reply
0 Upvotes
2 Replies 2
Highlighted
Regular Advisor

Hello!

 

On desktop, the height of your background image is being set by the padding on the "custom-banner-area" class. If you Ctrl + F in your CSS and search for ".custom-banner-area" you should see this: 

 

.custom-banner-area {
    background-size: cover;
    color: #fff;
    padding: 15em 0;
    background-position: center center;
}

 

If you reduce the size of the padding from 15em to something lower (e.g. 10em), your background image will be smaller.

 

You might also find two other "custom-banner-area" classes under "media" tags for smaller devices: 

 

@media (max-width: 414px)
.custom-banner-area {
    padding: 8em 0;
    height: 300px;
}

and

 

@media (max-width: 767px)
.custom-banner-area {
    padding: 10em 0;
    height: 300px;
}

 

(Screens smaller than 414px and 767px respectively)

 

You can also change the padding on these to reduce the height on smaller devices. 

 

EDIT: note that in the padding, the first number is the padding at the top and bottom and the second number is how much padding there is in the left and right (keep this as 0). 

 

 

I hope that helps!

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

Highlighted
Occasional Contributor

Thank you! This was really helpful. I've got it fixed. Appreciate it!

Reply
0 Upvotes