Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 6, 2016 at 2:19 pm #628289
    dondela

    Dear support-team,
    i want to have a custom background image above the header. (See the screenhot) Is this possible ?
    Thanks for helping

    May 6, 2016 at 5:22 pm #628401
    Basilis

    Hi dondela!

    Please activate the top row bar, with the social media icons and phone and we will help you remove the text and just have an image there
    Let us know when do so we can help you with the CSS code ( if you can not do it )

    Regards,
    Basilis

    May 7, 2016 at 9:23 am #628568
    dondela

    Hi and thanks for the help,
    i activated the top row bar with the social media icons and phone. How can i place an background image to the top row bar?

    May 7, 2016 at 7:11 pm #628665
    Jordan

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
#header_meta {
    background-image: url('yourimageurl.jpg') !important;
    height: 50px !important;
}

    Insert your image URL and adjust the height of the top bar as you wish.

    Best regards,
    Jordan

    May 8, 2016 at 6:57 pm #628883
    dondela

    Thanks for helping!
    This worked very well. Is there as well a solution to place a background image on bottom of the container. See the grey squares at the bottom of the screenshot.

    May 10, 2016 at 11:51 am #629823
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #footer{
    padding-top: 0;
}
#footer:before{
    content: "";
    background-image: url('http://relaunch.voltaris.de/wp-content/uploads/2016/05/square.jpg') !important;
    background-position: top !important;  
    width: 100%;
    display: block;
    height: 50px;
}

    Cheers! 
    Josue

    September 19, 2016 at 3:20 pm #688532
    dondela

    Hi support team,
    i added a background image to my header with this css:
    #header_meta {
    background-image: url(‘http://voltaris.de/wp-content/uploads/2016/05/square.jpg’) !important;
    height: 65px !important;
    background-repeat: repeat !important;
    background-position: top !important;
    border-bottom-style: none;
    }

    It works very well on Mac-Browsers. But in windows firefox and explorer the Background image doesn`t scale down when i minimize the browser width. So the menu does overlap the background image logo. Is there an css trick to force the background-image to scale down on windows?

    September 19, 2016 at 6:30 pm #688657
    Josue

    Hey!

    Try adding this code to General Styling > Quick CSS:

    @media only screen and (max-width: 767px) {
#header_meta {
background-size: contain;
}
}

    Cheers! 
    Josue

    September 20, 2016 at 9:56 am #689032
    dondela

    Thanks for your help.
    I see no difference, the header Background-image doesnt´scale down on windows-browsers. You have another idea?

    September 20, 2016 at 5:26 pm #689437
    Josue

    Hi,

    Have you checked it on an actual mobile device?

    Best regards,
    Josue

    May 18, 2018 at 9:37 am #958505
    mayksenden

    Hi,

    I tried the code provided by Jordan and it does exactly what I want, IF I choose to unstick the header.

    If I try to make the header sticky, part of the top of the page disappears under the header (and I can’t scroll up further). I have a fixed header height set for the menu below the image. See link.

    I want the header menu to be sticky but the top bar (the image) to be unsticky (I already tried setting sticky for both but it made no difference).

    Any advice?

    Thanks,
    Mayk

    May 18, 2018 at 10:38 am #958534
    mayksenden

    Never mind, just added a little extra padding to the main content, and that did it.

    .content, .sidebar {
    padding-top: 256px;
    padding-bottom: 48px; }

    May 19, 2018 at 6:42 pm #959130
    Victoria

    Hi mayksenden,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.