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

Add background image to header in 7.1


ed.design
Go to solution Solved by ChrisBartow,

Question

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 

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Page Header <style> .header-announcement-bar-wrapper { background-image: url("https://static1.squarespace.com/static/5e8f40af1b4e4b61d7da3560/t/5e98a44ff7394c3f871aec65/158706183

Posted Images

12 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

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!

Link to post
  • 0
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>

 

Link to post
  • 0

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

 

 

Link to post
  • 0
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?

Link to post
  • 0

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: 

Gart-BG-Header-Example-2.thumb.jpg.57070eafe10e8c120c04a66180014e66.jpg

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. 

Link to post
  • 0
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: 

Gart-BG-Header-Example-2.thumb.jpg.57070eafe10e8c120c04a66180014e66.jpg

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

Link to post
  • 0

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. 

Link to post
  • 0

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!

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...