Add background image to header in 7.1

Site URL: https://mitzura.squarespace.com/

Hello,

Does anyone know of a way to add a background image to the header in 7.1? 

The workaround I've found is to make the header transparent, then add a section below the header which has the background image. But I don't want to have to go through every page of the website adding this extra section. 

I also tried adding background-image through custom CSS but it's not working:

#header {
background-image: url("sunman_tiny.gif") !important;
}

Any ideas much appreciated.

Thanks,
Erin 

You can also add this to Home > Design > Custom CSS

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

Thank you both. I combined your suggestions and my problem is solved!

Final code: 

.header-announcement-bar-wrapper {
   background-image: url("https://static1.squarespace.com/static/5e8f40af1b4e4b61d7da3560/t/5e98a44ff7394c3f871aec65/1587061839876/sunman_tiny.gif") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

(realized I had my url format wrong also)

Many thanks!

Is it possible to add an image to a header on an individual page, not site-wide?

On 1/8/2021 at 1:41 AM, Abbodabby said:

Is it possible to add an image to a header on an individual page, not site-wide?

Add to Page Header

<style>
  .header-announcement-bar-wrapper {
   background-image: url("https://static1.squarespace.com/static/5e8f40af1b4e4b61d7da3560/t/5e98a44ff7394c3f871aec65/1587061839876/sunman_tiny.gif") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

Hi, 

is there a way to put different image backgrounds on headers? 

I have an index that I would like my header to stay transparent, but for each project inside I would like to put a background on the header.

let me know if there is anyone that can help.

https://leonardocampaner.com/selected-work

pass: leonardo

thank you

On 4/10/2021 at 12:20 AM, vcampaner said:

Hi, 

is there a way to put different image backgrounds on headers? 

I have an index that I would like my header to stay transparent, but for each project inside I would like to put a background on the header.

let me know if there is anyone that can help.

https://leonardocampaner.com/selected-work

pass: leonardo

 

thank you

 

 

Hi. Each project will have a different or all projects same background?

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. 

23 hours ago, 2eLybZ6u said:

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. 

The url doesn't exist

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 there I was wondering if after using this code to put in a background image in the header if you can edit it so that you can a use a different image for mobile device? My background image is just not looking great when it goes to mobile site. 

.header-announcement-bar-wrapper {background-image:url('IMAGE URL HERE'); background-repeat:repeat; background-size:1519px 584px;background-position: center;} .header {background-color:rgba(0,0,0,0)!important}

Thanks!

On 5/11/2021 at 3:40 PM, AnnaLDN said:

Hi there I was wondering if after using this code to put in a background image in the header if you can edit it so that you can a use a different image for mobile device? My background image is just not looking great when it goes to mobile site. 

.header-announcement-bar-wrapper {background-image:url('IMAGE URL HERE'); background-repeat:repeat; background-size:1519px 584px;background-position: center;} .header {background-color:rgba(0,0,0,0)!important}

 

Thanks!

Can you share site url? We can help easier

This doesn't seem to work anymore. Every time I use the above code with my own image URL, nothing shows up in the header.

URL: https://www.totallyradsupplements.com/

On 10/19/2022 at 12:32 AM, CentricDesigns said:

This doesn't seem to work anymore. Every time I use the above code with my own image URL, nothing shows up in the header.

 

URL: https://www.totallyradsupplements.com/

The code still correct. Which image url did you add the code? 

On 10/22/2022 at 9:18 PM, tuanphan said:

The code still correct. Which image url did you add the code? 

I ended up not using it so the image isn't there anymore.

On 10/23/2022 at 2:18 AM, tuanphan said:

The code still correct. Which image url did you add the code? 

Is this code still working as when I add it nothing happens the url that I am using is 

17 hours ago, adeH said:

Is this code still working as when I add it nothing happens the url that I am using is 

What is your site url?

Had the same problem - image not appearing.

You need to edit the header, click "Style," and change to something other than "Solid" -- doesn't seem to matter which as long as it's not Solid. (EDIT: Or leave solid, but reduce the opacity.)