SandraTamer

Hi Beyondspace,

thanks for your help! I have uploaded the image on the old website to create an image URL and then inserted this in the code. This is the code I used:

.header-display-mobile .header-title-logo  a img {
  opacity: 0;
}

.header-display-mobile .header-title-logo a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  height: 100%;
  width: 100%;
  background-image: url("https://images.squarespace-cdn.com/content/v1/636cfac20e5814578651d8d2/023fe7f0-86f6-4d32-8ea3-3c67ceff2427/Trivium_mobile+header_3.0+Home.png?format=500w");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index:-999;
}

this is how the header is shown now:

Can you help me to finetune this?
Thanks,
Sandra

We are in the course of redesigning the content of the website https://www.trivium-ceu.international/ which is designed with Squarespace 7.1. The above linked website is the old website, the new one is still in draft mode.

On the new page, the aim is to use two different header images: one for the desktop version and one for the mobile version. On the newly designed (but not live) page 3.0 Home we are using this header images which have been already uploaded to the Asset Library:

• Desktop Header: hero images5-min.png
• Mobile Header:  option 2.png

I have tried to add custom CSS (https://arugula-carrot-ap6w.squarespace.com/config/pages/website-tools/custom-css), however although the code is implemented and saved on the draft page, I cannot see any changes in the preview. Also, I am not sure how to extract the image url so I can add it to the code.

Would any of you like to help and share a complete custom CSS code to implement the different header image for mobile version?

P.S. I have tried these already 

https://forum.squarespace.com/topic/194254-how-do-i-make-desktop-and-mobile-headers-different/
https://www.youtube.com/watch?v=OUpK8jbnrEo
https://www.youtube.com/watch?v=eAvJmTfukR4