Adding an image to site header on the homepage only in 7.1

I'd love to have the image that is currently below my site header (attached for reference), behind my logo and menu, but on the homepage only. I'd also like the image to continue further down the page rather than be as narrow as the actual site header  (I want to say a full bleed image? But I'm never quite sure of the terminology! Apologies). I hope that all makes sense! Any help would be amazing. Thanks in advance!

Hi,

Can you share link to homepage?

On 10/24/2023 at 1:23 AM, tuanphan said:

Hi,

Can you share link to homepage?

Hi Tuanphan, here it is...

https://www.cleabroad.co.uk

18 minutes ago, CleBee said:

Hi Tuanphan, here it is...

https://www.cleabroad.co.uk

See the image. Do you want the header here?

1 hour ago, Web_Solutions said:

See the image. Do you want the header here?

Hi, I've mocked up my homepage in Illustrator to show you what I mean (while we're on the subject I'd love to have the same image on my mobile version too for consistency)

24 minutes ago, CleBee said:

Hi, I've mocked up my homepage in Illustrator to show you what I mean (while we're on the subject I'd love to have the same image on my mobile version too for consistency)

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#collection-64270d53fd2cb51247809705 header#header {
  background: transparent !important;
}
#collection-64270d53fd2cb51247809705 .header-announcement-bar-wrapper {
  padding-left: 6vw !important;
  padding-right: 6vw !important;
}
#collection-64270d53fd2cb51247809705 .header-title-logo img {
  filter: invert(1) !important;
}
#collection-64270d53fd2cb51247809705 .burger-inner > div {
  background-color: #fff !important;
}
#collection-64270d53fd2cb51247809705 .header-title-nav-wrapper * {
    color: #fff !important;
}
[data-section-id="645a08defff3456ddac666ad"] {
  padding-top: 0 !important;
}

2 hours ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

#collection-64270d53fd2cb51247809705 header#header {
  background: transparent !important;
}
#collection-64270d53fd2cb51247809705 .header-announcement-bar-wrapper {
  padding-left: 6vw !important;
  padding-right: 6vw !important;
}
#collection-64270d53fd2cb51247809705 .header-title-logo img {
  filter: invert(1) !important;
}
#collection-64270d53fd2cb51247809705 .burger-inner > div {
  background-color: #fff !important;
}
#collection-64270d53fd2cb51247809705 .header-title-nav-wrapper * {
    color: #fff !important;
}
[data-section-id="645a08defff3456ddac666ad"] {
  padding-top: 0 !important;
}

 

Hi, that was great. It didn't look quite right as I had it previously - I had the image as an image block, and removed it, using the same image as the background and that worked much better as a full bleed. 

One last question, do you know if there is a way to have the same image as the background when you open up the hamburger menu in the mobile view? 

Many thanks in advance!

15 hours ago, CleBee said:

Hi, that was great. It didn't look quite right as I had it previously - I had the image as an image block, and removed it, using the same image as the background and that worked much better as a full bleed. 

One last question, do you know if there is a way to have the same image as the background when you open up the hamburger menu in the mobile view? 

Many thanks in advance!

Add this code at the bottom of the previous code. 

#collection-64270d53fd2cb51247809705 .header-menu .header-menu-bg {
    background: transparent !important;
}

41 minutes ago, CleBee said:

Hi, I've noticed something odd and I was wondering if you could help me - since using the code I realised the logo looks a bit low res, and the colour isn't behaving as expected - when I uploaded a pink version it read as green, and I've currently got a midnight blue version that reads as a pale colour, and when I tried a blush colour it read as black. Is this usual and is there a work around? Thanks in advance!

For the logo. See the attached image. Just remove the code that I have mark on red box.

1 hour ago, Web_Solutions said:

 

Add this code at the bottom of the previous code. 

#collection-64270d53fd2cb51247809705 .header-menu .header-menu-bg {
    background: transparent !important;
}

 

 I think it looks a bit odd with the logo behind the menu, is there a way of uploading a separate (same) image?  Thank you!

19 minutes ago, CleBee said:

 I think it looks a bit odd with the logo behind the menu, is there a way of uploading a separate (same) image?  Thank you!

 

Where do you want to add separate image?

1 hour ago, Web_Solutions said:

Where do you want to add separate image?

I want to add the same image behind the menu, but without the 'C' logo overlayed, so wondered if I could upload the photo in a different way for the mobile menu view?

18 hours ago, Web_Solutions said:

 

Here is the code

#collection-64270d53fd2cb51247809705 .header-menu .header-menu-bg {
    background: url(https://images.squarespace-cdn.com/content/v1/5f9b2668578b092bb9a746dc/b5044b97-a99d-42f5-bf13-e1ec9d367fd1/alternative-christmas-tree-branch-red-berries-bedroom.jpeg) !important;
    background-size: auto 100% !important;
    background-position: 49.2% 0% !important;
}

 

Thank you so much! It looks great, I'm really happy with the result!

14 minutes ago, CleBee said:

Thank you so much! It looks great, I'm really happy with the result!

Welcome!