Background header

Home Forums WordPress Themes – Premium Encounters Background header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #14758
    Prisca
    Participant

    Hello

    Is there a way to make a custom background header – actually I am using the scanlines to do that – to make it responsive. I use a transparent logo for the height and then my whole header is the logo – that way I can have it all the way across. Only little problem is that it is not responsive so I see only the left part of the logo/scanlines on mobile

    Thank you so much 🙂

    #19270
    Sushil Adhikari
    Moderator

    Just to confirm… you want the background to be responsive?
    If so, this is actually a very difficult thing to do, and even I haven’t attempted that feat. But my best suggestion is to Google for responsive background images.

    #19271
    Prisca
    Participant

    Thank you so much for your quick reply 🙂

    Yes, I use the scanlines.png to do my header background. But OK, I will Google that.

    If you have an idea please share it – you are the specialist..ha

    Thanks again 🙂

    #19272
    Sushil Adhikari
    Moderator

    lol… I’m not always the specialist.

    #19281
    Prisca
    Participant

    I did it!!!

    Here we go – found that online and it works(scanlines because I called my background/logo scanlines.png) :

    .scanlines-header,
    .scanlines-footer {
    /*min-height:260px;*/
    background: transparent;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    /*font: 0/0 serif;
    text-shadow: none;
    color: transparent;*/
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    }
    Notice I commented the height and also the text – if you have text: uncomment. The height: I uploaded a transparent logo – space holder with the height I needed. I don’t use text but if you do you may need that. The fun part – suddenly my footer disappeared..duh..could not understand why – and then I thought about that text in the css – commented and my footer is back.

    So much fun..haha!

    Have a great weekend 🙂

    #19282
    Sushil Adhikari
    Moderator

    Nicely done… I’m impressed!
    Now I know how to do it :side:
    I will have to try this once I get some spare time…

    #14759
    Prisca
    Participant

    Glad I could teach you something 😀

    I like full width headers because it’s more lively – we can put more stuffs and images and all but the thing is if I put only the logo as image through the customize, then with the padding it does not go all the way on both sides when we choose the 980 or 1170 fixed width. That way, with a background using the scanlines.png my logo can go all the way from one wall to the other. Seems cleaner – oh well…that’s me..ha..

    Voila 🙂

    Have a great weekend!

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