Okay
  Public Ticket #3031524
Adding background image to header area
Closed

Comments

  • morriemeritco started the conversation
    April 25, 2022 at 11:33pm

    Hello! Is there a way to add a background image - in my case, a watercolor background in the form of a PNG - to my Salient header? Do I need to use custom CSS to achieve this, and if so, where do I start? I want the entire header to have the image as the background. Thank you!

  •  8,839
    Tahir replied
    April 25, 2022 at 11:44pm

    Hey morriemeritco ,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   morriemeritco replied privately
  •  1,877
    Judith replied
    April 26, 2022 at 6:53am

    Hi There,

    How about you set it to transparent by enabling these options: Salient > Header navigation > Transparent Header Effect

    6787215353.png
    5194912257.png

    Hope this helps.

    Thanks.

  • morriemeritco replied
    April 27, 2022 at 4:12pm

    Hi Judith, 

    Thanks so much for your response. I tried that out and it is not quite the look I'm going for - I am hoping there is some way to keep all the features I have now (completely opaque header with no stickiness) but replacing the solid header background color with an image. There might not be a good way to do this but I figure I'll try!

    Thanks again!

  •  1,877
    Judith replied
    April 27, 2022 at 4:42pm

    Hi There,

    Please try pasting this css in css custom code section under Salient > General Settings > CSS/Script Related:

    body #header-outer:not(.transparent) {
        background: url(https://jourdanjetsets.com/wp-content/uploads/2021/12/testest.jpg);
  background-size: cover;
    background-repeat: no-repeat;
        background-position-y: bottom;
    }

    Thanks.

  • morriemeritco replied
    April 27, 2022 at 8:38pm

    Judith - I am getting an "unknown property" error message for the below line. Any thoughts on why that might be?

    Thanks!

        background-position-y: bottom;
  •  1,877
    Judith replied
    April 28, 2022 at 5:26am

    Hi There,

    That's minor notification, it won't affect the functioning of the code, you can just ignore it. It is only a problem when it shown a red exclamation mark and that always has to do with the code syntax having a problem.

    Thanks.