Home>Support>Using two header images

Using two header images

By Gopu, 17 days ago. Last reply by Gopu, 11 days 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. 12 days, 22 hours 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. 12 days, 2 hours 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. 11 days, 23 hours 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. 11 days, 19 hours 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