Header background not with full width

[OMN-Shopppen]

Hello. 

I Have used this code to get background in the header

header.header {
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%;
}

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

[Mehran_Ali]

Hi @OMN-Shopppen 

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

[OMN-Shopppen]

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

[Mehran_Ali]

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 

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!

[ZestardTech · Accepted solution]

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

[topnewyork]

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!