1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 header size

Discussion in 'Styling and Customization Questions' started by akafusion, Jun 25, 2014.

  1. akafusion

    akafusion Member

    What size image should I create for the header, we have a logo but want to put a landscape image as the background

    I know I can change the height and make it repeat - any advice please on how to do it bearing in mind the header is responsive

    Thanks.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This will create a header background that conforms to the width of the page.

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Code:
    #header
    {
    	background-image: url('path/to/background.png');
    	background-size: cover;
    }
    
     
    Silverhair and MichaelDance like this.
  3. Silverhair

    Silverhair Member

    Hi Jake, I tried this but came up with several different overlapping copies of the same landscape image filling the header area rather than just the one fit to the page. It seems so close to what I am trying to do too! Maybe its because I am in xf 1.4? or the landscape image is not large enough?

    I thought I had made sure everything is responsive based on the instructions I could find around here, but my header logo and image still do not respond to different screen sizes, more specifically going from a smaller screen to a larger one.

    Any and all help is appreciated.

    Thanks in advance! :D
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I can't provide a definite answer. This requires working with your style. If you post your forum URL and the URL of the background image you want to use then I can probably come up with some CSS for you.
     
    Silverhair likes this.
  5. Silverhair

    Silverhair Member

    Thanks, I will definitely take you up on that. I'm using the default xf style, really haven't made any changes at all.

    I uploaded the image to the server, it's at: styles/default/xenforo/header_random_1c.jpg

    The image wasn't overlapping exactly, there were 4 joined images filling the header area and then one solo image on top of them all in the default location. If you look at the header now I have switched it back ot the default.

    Very much appreciate you taking the time Jake, thank you.
     
    Last edited by a moderator: Dec 12, 2014
  6. Russ

    Russ Well-Known Member

    @Adamant1 if I were you I would simply make those into 2 different images. Text be one image with a transparent background, then you can have the lake image as another one(with no text).

    Set the logo path to the text logo image, then in extra.css you could something like...

    Code:
    #logoBlock .pageContent
    {
    background-image: url('@imagePath/xenforo/lakeimage.png');
    background-size: cover;
    }
    
     
    Silverhair likes this.
  7. Silverhair

    Silverhair Member

    Thanks Russ, I will try that here as soon as I can sit down to it...(y)
     
  8. Silverhair

    Silverhair Member

    well, trying to work with some of this now, and wondering...is there a good resource to start to learn css and html in spare time to fiddle with things like this...?

    Right now I am solely working with the background cover aspect and it seems to cover too much...the quality and niceness of the header image is lost because it seems the command to cover almost forces it to cover the entire background of the page rather than just the header area, so you only see a small portion of the header image.

    I clearly need to learn my css and html, so tips on do it yourself how to get started on that would be great...

    ...But I would also like to sort out this header image and make it responsive to all changes in screen size, but also use the entire image rather than just a small portion that is visible behind the forum software.

    ugghh...will work on transparent logo now instead.

    and help/tips appreciated! :D
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I think it looks good right now. It fully covers the header area.

    Russ has a good suggestion. By splitting the title text from the background it will ensure that the text stays in place while the background is flexible.
     
  10. Silverhair

    Silverhair Member

    hmmm, ok, yes have made transparent title text now but for the life of me I can't get it to show up. I am very new to css, but my transparent title text now just shows up as a broken link icon instead...?
     
  11. Silverhair

    Silverhair Member

    ugghh, this is maddening. cannot get the logo to show, can't even link to images on my server anymore, nothing shows up, have to link from a 3rd party site now just to get an image.

    am using this in extra.css, but if I remove it nothing works, even if I have a logo image linked in the header logo image path of style properties.

    Code:
    <xen:if is="@enableResponsive">
    #header
    {
       background-image: url('headerimageurlatphotobucket.jpg');
       background-size: cover;
    }
    </xen:if>
     
  12. Silverhair

    Silverhair Member

    Haha, wow, this is tough when you don't know how to use code properly...i got it working :D

    now...the image I have in background doesn't look right, and I can't figure out why...

    nevermind, sorted it out finally...thank you all for your help!!!!
     
    Last edited: Dec 12, 2014

Share This Page