Header across the whole page

**scruffy.thedog** · 15 December 2010, 04:12 PM

I have made a three colour header to go across the whole browser (3 shades of the same colour) when i make it a .png re import it > open bitmap background>Background tab, it tiles as the left edge is darker then the right and an obvious vertical line appears

-if the 'continuation' of the header could be 'fliped horizontally' no line would be visible is this possible? is this sorted by any teak?

-or do i just make the original.png image much wider than any browser is likely to be say3000 pix?

what's the answer. Thanks for input

scruffy

**Pegasus** · 15 December 2010, 07:49 PM

Hi Scruffy,
I don;t understand what you are trying to do and I am only a beginner, but perhaps me asking questions gets someone with more knowledge answering.
So here goes nothing...
So you have made a tree colour header - I assume in Xara?
If so, is this the only object on a blank page?
If is as wide as the page?
Is it supposed to tile down or is it already the same size as a whole page?

I have made a header myself in xara, had no clue what to do with it so did a screenshot and pasted in Paint.net (Free editing sw), then resized it to 1024 wide and exported it as png. Then dropped it in my own theme directory and now I can just drag and drop it from theme to my page.
Not sure if that is what you are after but from what you are saying, xara messing things up for you.

Hope this gets a response from someone.

**gmjhunter** · 23 January 2011, 04:47 AM

In response to your header post, I have had this issue as well. My suggestion is to do this in another editor such as photoshop > create the header complete on transparent background and > save for web > choose .PNG 24 > then paste or drag it onto your page > you can resize it accordingly without losing quality

For example view: www.gforcebasketball.org

This header and footer were created in photoshop, then pasted. Obviously there are numerous layers but if you want the seamlessness, I would suggest you do it another photo editor. Let me know if have any other questions.

**Drwyd** · 23 January 2011, 07:59 AM

Hi Scruffy

Are you looking for something like this ?

**scruffy.thedog** · 24 January 2011, 03:52 PM

yes what i did was a 3 point fill with blue and just pulled it to the left and right as far as i could go in xara and added 'nopageclipping' name for it i.e the header and foooter obvioulsy if someone has a vey large width browser it will end but i figured for the vast % of the world this would not be an issue

see here http://www.talkgraphics.com/showthre...r-scruffy-site

the chiros derby website

if you have a bettter work around i.e yours could you let me know

**Drwyd** · 24 January 2011, 04:46 PM

Hi Scruffy

The 'nopageclipping' is handy but it causes an unnecessary scroll bar at the bottom of the browser.

The method I use relies on the fact that all backgrounds tile, with the origin at the left edge of the page. Not the browser window.

What I do is create the background as I want it to appear and centre it on the page. I then chop off the section to the left of the background where it aligns with the left edge of the page and stick it on the right. The background will then tile in such a way that it will "re-assemble" itself.

See Attached and http://chapelgate.magix.net/public/centered_background/index_htm_files/0.png

Unfortunately it will not do the footer as well. It should be possible to use "page clipping" in conjunction with some CSS code to disable the horizontal scroll bar but that will cause problems with small screen sizes. The viewer will not be able to get to the content on the right of the page.

**Drwyd** · 24 January 2011, 05:03 PM

Got it

Put this in the <head> place holder

Code:

<style type="text/css">
html {
overflow-x:hidden; overflow-y:scroll;
}
</style>

This makes the cut and shut method obsolete and allows full width headers and footers.

Edit: small screens can get to the right side content with "mouse wheel" scroll.

**scruffy.thedog** · 24 January 2011, 05:40 PM

cheers for your work around will check it out tomorrow

btw dooooh i had not even noticed the scrolller at the bottom with that you can get to the redge.....ugly

**pauland** · 24 January 2011, 09:12 PM

This is rather old ground. Most web designers will avoid using radial gradients because of these hassles and will settle for linear verical gradients at the edge. These allow for an infinite repeat with no scroll bars.

**Drwyd** · 24 January 2011, 09:45 PM

Why settle ?

Thread: Header across the whole page

Thread Tools

Display

Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Re: Header across the whole page

Bookmarks

Bookmarks

Posting Permissions