Home Forums Weaver Xtreme Theme Weaver Xtreme Theme & Plus: responsive header background image – size

This topic contains 6 replies, has 3 voices, and was last updated by  Nele 1 week, 4 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #51811

    Nele
    Participant

    Homepage: https://ccdnetwork.de/conference/

    My question is about the responsive background header image.

    Is it possible to have the image in its normal height, even if the text on it is a small one?
    And is there a way , that the image keeps its size when resizing to a smaller screen and for small tablet?

    In my case I have put margin-bottom and margin-top to the text, in order to get the whole image visible in its height. But this looks quite bad when you are resizing the window and also on tablet.

    #51813

    Weaver
    Keymaster

    To get the image resizing you describe, you can’t use the header image as a bg image – you need to use the standard “As img in header” option. And I think your custom margins are further complicating the matter.

     

    I’m also not sure how you are getting the “Conference” or “About” titles over the bg image at the moment, but you could do that with the img in header options as well.

    There are also options to move some of the other header content over the header image.

    But, bg images do not resize in direct proportion the the page width, but the standard bg image does.

     

    #51815

    Nele
    Participant

    I created a per page custom field “header”, put in the value: 

    Conference

    In the global custom css rules I put:

    .box {
    text-align: center;
    margin-left: 2em;
    margin-right: auto;
    padding-right:30px; padding-left:30px; padding-top:10px; padding-bottom:10px;
    width: auto;
    background-color: #232f78; opacity: 0.80;
    color: white !important; font-size: 30pt;
    display: inline-block;
    -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
    overflow: hidden;
    align: left;
    margin-top: 3em; margin-bottom: 15em;
    font-family: ‘Libre Franklin’, sans-serif;
    font-weight: 600;
    }
    .is-mobile .box {
    text-align: center;
    margin-left: 0.3em;
    margin-right: auto;
    padding-right:5px; padding-left:5px; padding-top:3px; padding-bottom:3px;
    width: auto;
    background-color: #232f78; opacity: 0.80;
    color: white !important; font-size: 20pt;
    display: inline-block;
    -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
    overflow: hidden;
    align: left;
    margin-top: 1em; margin-bottom: 7em;
    font-family: ‘Libre Franklin’, sans-serif;
    font-weight: 600;
    }

    So if I use “as img in header” how can I get the text onto the image??

    #51816

    scrambler
    Moderator

    You may want to always start to explain what you are trying to achieve, so we can be sure of what is the better solution.

    If what you were trying to achieve, is get the content of the header Top area over the header image, we can do that with Custom CSS.

    So as weaver said, if you want a fully responsive header image and the Header Top area over it, use the regular Header image, then add The CSS rules below in Main Options > Fonts & Custom > Custom CSS Rule box, to move the Header Top area over it.

    #header {position:relative;}
    #inject_header {position:absolute;margin-top:3%;z-index:1000;}

    Depending on how much content will be there, we will have to check what happens on phone, and may need additional CSS to tweak the mobile styling

    #51817

    Nele
    Participant

    Value should be: 

    TEXT
    #51818

    scrambler
    Moderator

    We cross posted, please check my answer above

    #51819

    Nele
    Participant

    Okay, that’s great, thank you!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.