On my site, I want the body to scroll over my header image. With background-attachment: fixed, it works, but the image gets way too big after which my title is not readable anymore. In other words, the background-size: cover, doesn't work anymore when I add background-attachment: fixed.
Curious if anyone else has had this problem and if anyone has a solution for this.
Here is my code:
.site-header {
background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
background-size: cover;
}
PS2, my site: https://howtogetrippedathome.com/
background-attachment: fixed will handle the image as if the element was 100% height and width of the viewport. Therefore background-size: cover; will resize the image height to fit the viewport.
Try using background-size: 100% auto; (100% of the width | auto will set the height in a way that won't stretch the image)
I tested it on your side and with that edit it works 100%.
Unfortunately I can not add a code snipped because it will size the background to stackoverflows viewport and not to the code-sippets viewport.