Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hide background header image on specific page


2eLybZ6u

Question

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:

170079019_ScreenShot2021-05-01at13_20_02.png.9a6cb01bb4eafa97453d66b82371de79.png

 

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: 

639174446_ScreenShot2021-05-01at13_28_34.png.c060b9508fa8a4bc2231f59a96f81a95.png

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. 

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...