The header image resizes when scrolled to the top.

Tagged: Header image, header image blurry, resizing

This topic has 2 replies, 2 voices, and was last updated 4 years, 2 months ago by NoCodingExperience.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
May 19, 2018 at 12:26 pm #22630
NoCodingExperience
Customer
Hi Wes,
I’ve been using the Aspire Pro theme for several months now, and I love it! The best part is the support you provide on these forums!

I tried to do as much as I can setting up my site, but I am running into an issue that I need your help on.

The feature that I want to remove is that the header image is large when the user scrolls to the top of the page. And the image shrinks immediately when scrolling down. I like the way the image looks when it is shrinks. I don’t want the header image to change size as the user scrolls the website. I just want it to stay one size, and preferably as sharp as possible (it’s a little blurry right now).

My current site is http://www.RareUnicorns.com

Thanks!
May 19, 2018 at 2:23 pm #22631
Wes
Moderator
That’s good to hear!

For the header, I would remove this part – background-size: contain !important; from line 1258 in your css.
```
.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	height: 76px; /* default was 76px;*/
	text-indent: -9999px;
}
```
That would reduce the image size back to the original.

Next, if you want the entire header (black background) to stay consistent, then you could remove the space (padding) from up top. You can find this on line 1193 –
```
.front-page .site-header {
	border-bottom: 1px solid #ddd;
	padding-top: 30px;
}
```
Let me know if this works
February 2, 2020 at 2:37 am #23753
NoCodingExperience
Customer
This worked great, thanks Wes!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.