Home>Support>Using two header images

Using two header images

By Gopu, 9 months ago. Last reply by Gopu, 9 months ago.

In north theme is it possible to add two header images. one for default sticky menu and other for floating.

i set one header image using theme customisation option named ‘imageurl’

(when i tried using the css
#masthead .site-branding img {
background-image: url(“imageurl”); with out setting any header image in theme customisation no header image showed up on masthead)

i tried to use this css to make it work for floating

#masthead.floating .site-branding img {
background-image: url(“image url1”);

when the page is scrolled down both images ie both ‘imageurl’ and ‘imageurl1’ appear on the floating menu.is it possible to correct the issue with simple css customisation ?

Hope you are all doing great :)

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 9 months, 6 days ago Alex S Hi, I Work Here

    Hi Gopu,

    Do you have a public URL where we can take a look at your setup?

  2. 9 months, 5 days ago Gopu

    hai Alex,

    here is it. this is just a test website i made to check features


    on scrolling you can see two header images coming in the floating masthead. is it possible to show only the first header image in default masthead and the background image in floating masthead?

  3. 9 months, 5 days ago Alex S Hi, I Work Here

    Hi Gopu,

    Ah. Okay so it looks like you haven’t been able to bypass the base img. I would recommend doing what’s outlined in this article to replicate this article – something like this:

    #masthead.floating .site-branding img { {
    	padding-left: 200px;
    	width: 200px;
    	height: 61px;

    (sizing based on logo sizing, you’ll need to adjust it for the desired image dimesnions)

  4. 9 months, 5 days ago Gopu

    Thank you Alex, it worked fine. :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More