2eLybZ6u

Site URL: http://www.georjart.com/paintings-new

Hello,

The password for the page is: M6NYey7f

I've added a background image to the header of a specific page on the website above using the following code: 

#collection-6058d724f45e96664a810213 header#header {
    background-image: url(https://www.emergentcreative.co.uk/wp-content/uploads/2021/04/Gart-BG-Header-Example-1-2.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 9px;
    padding: 40px
}

However when I go to mobile view it looks like this:

I can see that the issue is with the "position" and "background-image" code and by going into Dev Tools in Chrome I can edit the following media query: 

@media only screen and (max-width: 750px)
#header {
    background-image: none !important;
    position: inherit !important;

}

I can get it too look normal: 

However I'm not certain how to add this code into the CSS editor in Squarespace, let alone on a specific page which is what I'd like to do since the changes aren't live yet. 

Does anyone have a solution? 

Cheers, 

M. 

Hi please refer to my response to you on my post. The url doesn't exist because I enabled the page only to preview the issue since the changes aren't live yet. Now the issue is resolved I've disabled the page. 

Cheers, 

M. 

Hi thanks for response. The question was answered on a different forum. Turns out the canvas was wrapped in  <div class="canvas"> with the following CSS: 

#canvas {
    max-width: 1200px;
    margin: 0px auto;
    padding: 75px;
}

Adding this CSS: 

#header{
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 9px;
}

Resolved the issue. 

Hi tuanphan I've managed to have some success with the code you posted: 

header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

However the background image does not cover the entire header area as I would like it to, such as in this example: 

Instead it only covers the main navigation area as you can see in this page I added the code to: 

https://matthew-kern-drzz.squarespace.com/paintings-new

Any suggestions? 

Cheers, 

M. 

Site URL: https://matthew-kern-drzz.squarespace.com/paintings-new

Hello, 

I am attempting to apply a background image to the header section of this website universally. For now I have just applied it to the specific page mentioned. I've had some success with the following code: 

#collection-6058d724f45e96664a810213 header#header {
    background-image: url(Image here);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

However as you can see from the link: 

https://matthew-kern-drzz.squarespace.com/paintings-new

The image does not cover the entire section. I'd like it instead to look like this: 

Does anyone have a solution? 

Cheers, 

M.