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.)

The above code does not work for me. Did something change yet again? How do you even reference an uploaded image? Why does it have to be so hard to do something so seemingly simple as adding a background image to your header? Chat is down, and every tutorial I find is outdated and no longer relevant.

After some messing around, this seems to work. Replace IMAGEURL with the background you want to use.

.header-announcement-bar-wrapper {
   background-image:url(IMAGEURL);
}