Replace default CERN theme header colour with a banner image WITHOUT using landing page

1

I need to add a banner image in the CSS (ie without any CERN theme landing page trickery :slight_smile: ) to replace the default CERN theme banner colour.

https://thenine.web.cern.ch/members is the site.

However I can’t figure out the code I need to add to my override file.

header {
    background: url("/files/CERN-PHOTO-201706-139-1.jpg");
}

I’m close but not quite there, the banner has now gone black so I’m in the right place… but… just… not quite working…

header {
    background-image: url("/files/CERN-PHOTO-201706-139-1.jpg");
}

This one definitely does not work, but using background almost does… but not quite… what am I doing wrong?

Help please! :slight_smile:

2

Hi Cath,

The background-image is the correct format but the image path might be wrong. What is the full path?

3

Full path according to my Mac Finder is:

https://thenine.web.cern.ch/_webdav//files/CERN-PHOTO-201706-139-1.jpg

4

If you use the override theme and you make the change to the theme.css there, try this:

background-image: url("…/…/…/files/CERN-PHOTO-201706-139-1.jpg`");

Save and clear caches.

5 
header {
    background-image: url(".../.../.../files/CERN-PHOTO-201706-139-1.jpg");
}

It’s still not working :face_with_monocle:

Have a look at https://thenine.web.cern.ch/members as an example page - definitely no image header showing…

I haven’t resize the image or anything, i wanted to be sure this was working before I did any cropping. Not sure if that’s playing a role?

I’ve added you as an admin in case you get a moment to dive in deeper…

-c

6

I saw that you had the image locally in the same folder so I used that one.

It should be ok now.

7

Ah, fab, thank you!

My css now looks like (for reference for others):

header {
    background-image: url("CERN-PHOTO-201706-139-1.jpg");
}

… and it works just fine. I wonder why it didn’t like the photo living somewhere else in the filesystem… well, if it works with the image in the same css folder, then so be it :slight_smile:

Thanks Sotirios!