XF 1.3 header size

[akafusion]

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.

 

[Jake Bunce]

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

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

#header
{
	background-image: url('path/to/background.png');
	background-size: cover;
}

 

[Silverhair]

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!

 

[Jake Bunce]

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]

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.

 

[Russ]

@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...

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

 

[Silverhair]

Thanks Russ, I will try that here as soon as I can sit down to it...

 

[Silverhair]

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!

 

[Jake Bunce]

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.

 

[Silverhair]

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...?

 

[Silverhair]

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.

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

 

[Silverhair]

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

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!!!!