Header resizes as I change the window size

Store Design
1

https://bumblespple.myshopify.com/
Password: boyohboy

when I make the window smaller in width or height, the header background image gets skinnier or wider. I want the header background to auto scale it so it will be the same throughout like my slider and my collection.

.site-header {

padding: $gutter/2 0;
background-image: url(“Banner.png”);
height: 100%;
width: 100%;
position: relative;
background-size: contain;
background-repeat: no-repeat;

}

I have this code for the site header. Am I suppose to put it with the flexbox or grid?

2

hello can you please share a screenshot whats the issue

3

I really don’t understand your question, but you can try background-size: cover
It will display full according to the content of the header.
Hope it helps!