4 replies [Last post]
BeatBox
Offline
newbie
Last seen: 15 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-10-26
Posts: 4
Points: 0

I'm new on this forum, so first of all, hello everyone Cool I'm a 21 year old webdesigner/developer from Belgium hooked on webstandards, and hope I can give some good contributions here. Let me start with my first question.

First have a look at this:

As you can see I need two tiling backgrounds. The horizontal tiling background (600px width) is behind the vertical tiling background (300px height). The vertical background tiles al the way down, the horizontal all the way to the right. This has to be so no mather how big the window is (up to a resolution of 1600x200).

To make sure that the vertical tiling background tiles al the way down, no mather how much content there is, the background is set on the body:

body
{
	background: url("images/bg.jpg") repeat-y 50% 0;
}

Now how do I place the horizontal background behind the vertical background?

I have allready tried the following:
- Make a background for the horizontal background, 1600px width and 300px height.
- Placing it as a centered background of a relative positioned div. A relative positioned div is automatically 100% wide (and I set it 300px in height).

div#gradient
{
	background: url("images/bg_gradient.gif") no-repeat 50% 0;
	height: 300px;
}

- Because this background sits on top of the body background, instead of under it, it overlaps.
- I have copied the part where it overlaps the vertical background with the piece of the vertical background and pasted it in the center of the horizontal background.

This method works partially. Sometimes there is 1 pixel difference between the place where it overlaps.

Any other ideas?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[CSS] Double tiling background.

I think you are better off with the horizontal image tiling on the body and the vertical image tiling on an element inside it.

body { 
  background: url(images/bg_gradient.gif) repeat-x;   /* no quotes */
}  

#wrap { 
  width: 600px;
  margin: 0 auto;
  background: url(images/bg.jpg) repeat-y 
}

For other styles to ensure body & #wrap extend the full height of the longer of viewport and page refer to themaninblue. #wrap above will correspond to his #non-footer. His description also seems to miss an important interior element style ensuring there is no content in #non-footer appearing behind #footer.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[CSS] Double tiling background.

He does mention that if the content reaches or exceeds the viewport height a bit of padding or margin will be required to prevent content being hidden, but it is a bit of a throwaway line.

I do find it funny how the popularity of this footer technique has grown as though it was a revelation. It's not new, seems as though the maninblue was the one to write it up. We've discussed this same technique ages ago on the forum.

Edit: just been reading some of the amusing comments to the maninblue page "If I turn of CSS it doesn't work" Laughing out loud when I saw your comment at the bottom Chris, and you managed to post it tomorrow, your just so avant-guard Smile .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[CSS] Double tiling background.

Other sites have had the technique and several threads have discussed it here since I joined. To give themaninblue his due, that explanation and six style rules are the simplest and clearest I have seen. Most other will complicate their styles/html by adding in headers columns etc which cloud the footer at bottom issue.

He seems to have missed out two key issues.
- some spacing at the bottom. That's key, more than just a passing remark. Without it all you are doing is keeping the footer at the bottom of the screen - which is only half of your aim.
- he doesn't make it clear that the top and bottom settings for margins, padding & border must be zero on height:100% elements.

Now I just work out how to send someone today's lotto numbers Tongue

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[CSS] Double tiling background.

Quote:
He seems to have missed out two key issues.
- some spacing at the bottom. That's key, more than just a passing remark. Without it all you are doing is keeping the footer at the bottom of the screen - which is only half of your aim.
- he doesn't make it clear that the top and bottom settings for margins, padding & border must be zero on height:100% elements.


This was always my concern with his explanation, yes great it's nice and simple but you don't want it simple to the point that important issues are overlooked, also as nice a solution as this is in a comparatively simple layout with few elements to upset things there can be a lot of gotchas in more complex layouts.

Quote:
Now I just work out how to send someone today's lotto numbers

Laughing out loud I was thinking that, as we have a rollover prize this saturday, if you could see your way to passing the numbers back.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me