Solved

Header Background image Is cut off regardless of resizing

Kai47
Tourist
4 1 3

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_1-1710580538718.png

Kai47_2-1710580588308.png

 

 

 

 

.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;
  }
}

 

 

 

 

Accepted Solution (1)

devcoders
Shopify Partner
190 31 48

This is an accepted solution.

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;
  }
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @Kai47

 

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

 

And password if any or you can remove the password temporarily

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

devcoders
Shopify Partner
190 31 48

This is an accepted solution.

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;
  }
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Kai47
Tourist
4 1 3

THANK YOU SO MUCH!. Works like a charm

devcoders
Shopify Partner
190 31 48

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.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!