Make background behind header full width on Studio Theme

Store Design

Topic summary

A user wants to make a header background image span the full browser width (rather than just the page content width) on Shopify’s Studio theme.

Initial Approach:

  • User added CSS targeting header.header element
  • Applied background image with background-size: 100% and no-repeat

Solution Provided:
Another user identified the issue: the CSS was targeting an inner element instead of its parent container.

Corrected approach:

  • Target sticky-header.header-wrapper instead of header.header
  • Use same background properties (URL, no-repeat, 100% size)
  • Apply within @media screen and (min-width: 990px) query

Additional Request:
The original poster also asked about adding a background image to the mega menu dropdown. A CSS snippet targeting .mega-menu__content with background-cover was suggested.

Status: Resolved - the parent container targeting successfully achieved full-width header background.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

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=1689805415”) no-repeat;
background-size: 100%;
}

Website is newdawnart.com

2

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…

3

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.

4

  1. Well, if it works it must be right’ish :slightly_smiling_face: 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;
}