Header background not with full width

Store Design
1

Hello.

I Have used this code to get background in the header

Skærmbillede 2024-11-29 kl. 13.27.56.png
Skærmbillede 2024-11-29 kl. 13.27.56.png1920×959 222 KB

header.header {
background: url(“https://cdn.shopify.com/s/files/1/0863/3394/8231/files/Design_uden_navn_-_2024-11-29T131902.647.png?v=1732882805”) no-repeat;
background-size: 100%;
}

But it is not full width. What to do?

I have already tried to change theme settings > layout > page width > to full - but this does not solve the problem

1 Like
2

Hi @OMN-Shopppen

Can you share your Store URL and password if it password protected

3

https://dhk1zg-x0.myshopify.com/

4

Hello @OMN-Shopppen

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
header {
max-width: 100%!important;
}

ZestardTech_0-1732884525178.png
ZestardTech_0-1732884525178.png1907×349 146 KB

5

Okay

You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

header.header:after {
    content: '';
    background: url("https://cdn.shopify.com/s/files/1/0863/3394/8231/files/Design_uden_navn_-_2024-11-29T131902.647.png?...") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

header.header> * {
    position: relative;
    z-index: 4;
}

The result will be

Mehran_Ali_0-1732884398097.png
Mehran_Ali_0-1732884398097.png1907×358 150 KB

this is the proper way to add an image because you are using the image without customizer option I can help you add an option into the header for image replace and change in future kindly send the collaboration code in private I will help you if you want otherwise this solution work for you

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

6

Hello, @OMN-Shopppen

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media screen and (min-width: 990px) {
    .header:not(.drawer-menu).page-width {
        padding-left: 5rem;
        padding-right: 5rem;
        max-width: 100%;
    }
}

Thanks!