Re: Make background behind header full width on Studio Theme

Solved

Make background behind header full width on Studio Theme

ddenby
Excursionist
19 1 2

I found another discussion about this and added the CSS as instructed. The issue is, I want the header background image to be full width, rather than page width. Can anyone provide me with instruction on this?

 

This is how I added the background image:

 

Step 1: Went to Online Store->Theme->Edit code
Step 2: Then went to Asset->/base.css->paste below code at the bottom of the file:

 

@media screen and (min-width: 990px) {
header.header {
background: url("https://cdn.shopify.com/s/files/1/0795/3308/0877/files/New_Dawn_Art_Abstract_Art_Charlotte_NC4.png?v...") no-repeat;
background-size: 100%;
}

 

Website is newdawnart.com

Accepted Solutions (2)

tim
Shopify Partner
3630 314 1343

This is an accepted solution.

You're assigning background on an inner element and you should be targeting its parent, similar to this:

  @media screen and (min-width: 990px) {
    sticky-header.header-wrapper {
        background: url(" . . . ") no-repeat;
        background-size: 100%;
    }
  }

Also, I believe you may have unintentionally deleted a closing curly brace before this code -- this changes your selector...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

tim
Shopify Partner
3630 314 1343

This is an accepted solution.

1. Well, if it works it must be right'ish 🙂 Editor can be too picky sometimes.

2. For mega menu, I'd go with:

.mega-menu__content {
    background: url(/cdn/shop/files/HEADER_Pour_Paintings.jpg?v=1689855227) no-repeat;
    background-size: cover;
}
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 3 (3)

tim
Shopify Partner
3630 314 1343

This is an accepted solution.

You're assigning background on an inner element and you should be targeting its parent, similar to this:

  @media screen and (min-width: 990px) {
    sticky-header.header-wrapper {
        background: url(" . . . ") no-repeat;
        background-size: 100%;
    }
  }

Also, I believe you may have unintentionally deleted a closing curly brace before this code -- this changes your selector...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
ddenby
Excursionist
19 1 2

Hi Tim, 

 

Thank you so much, this worked perfectly! I have two questions for you.

1. I put the entire image URL in the "..." area. It is highlighted in red in the CSS sheet, is this normal?

2. I would like to add an image to the mega menu (dropdown) background, can you send the code to do that as well? I would really appreciate it.

 

tim
Shopify Partner
3630 314 1343

This is an accepted solution.

1. Well, if it works it must be right'ish 🙂 Editor can be too picky sometimes.

2. For mega menu, I'd go with:

.mega-menu__content {
    background: url(/cdn/shop/files/HEADER_Pour_Paintings.jpg?v=1689855227) no-repeat;
    background-size: cover;
}
If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com