Header Background image Is cut off regardless of resizing

Store Design
1

As you can see below the image is not displaying completed.

This is the custom code used to insert the image.

Kai47_0-1710580523779.png
Kai47_0-1710580523779.png1870×310 106 KB

Kai47_1-1710580538718.png
Kai47_1-1710580538718.png1905×291 134 KB

Kai47_2-1710580588308.png
Kai47_2-1710580588308.png1605×496 519 KB

.header {
  background-image: url(https://cdn.shopify.com/s/files/1/0814/0282/2984/files/header1.png?v=1710226490);
}
@media (min-width: 990px) {
  .header {
    padding-top: 0px;
    padding-bottom: 0px;
    max-width: 100%;
    padding-left: 3px;
    padding-right: 3px;
  }
}
2

Hey @Kai47

Can you share the link to your store please? Thanks!

And password if any or you can remove the password temporarily

3

Hi @Kai47

Try this code.

.header {
  background-image: url(https://cdn.shopify.com/s/files/1/0814/0282/2984/files/header1.png?v=1710226490);
  background-size: cover; /* or background-size: contain; */
}
@media (min-width: 990px) {
  .header {
    padding-top: 0px;
    padding-bottom: 0px;
    max-width: 100%;
    padding-left: 3px;
    padding-right: 3px;
  }
}
4

THANK YOU SO MUCH!. Works like a charm

5

Hi @Kai47

You’re welcome! I’m glad to hear that it worked like a charm for you! If you have any more questions or need further assistance, feel free to ask.