I have two images which I want to use for a background - one at the top, and one underneath it. Is there any simple way to do this short of making one enormous image (the spacing would probably make it far too large)?
Cheers,
IsaacOriginally posted by isaac
I have two images which I want to use for a background - one at the top, and one underneath it. Is there any simple way to do this short of making one enormous image (the spacing would probably make it far too large)?
Depends on how your page look.
But you can put backgrounds in basicly any tag with CSS. Witout eg an URL to your page there is really not much more I can say.Well, lemme see if I can draw some ascii art:
|-------------------------------------|
| |
| |
| image one |
|-------------------------------------|
(space in between)
|-------------------------------------|
| |
| |
| image two |
| |
|-------------------------------------|
That's what I want the background to do, regardless of the contents of the page.
Is this possible?
CheersYes.
You are still abit vague about how you want the actual content to behave on the page as well as if the images should be fixed or scroll with the page.
Anyway in correctly working browsers you could set the 2 images with eg
html {background:white url(image1.png) 50% 100px no-repeat fixed;}
body {background:transparent url(image2.png) 50% 300px no-repeat fixed;}
If you need compability in older buggy browsers it howevere gets much more advanced since they don't understand setting backgrounds on the HTML tag.
That means you probably have to set 1 image on the <body> and then absolute position 1 image to where you want it on the page and then absolute position your entire ontop of the this image.Thanks, I'll try this. One question though - will this require I use an external stylesheet? Will it render properly because the <html> tag is before the <style> tag?
Just a thought..
CheersYou may be able to avoid using the html and body tag combination by using a div inside body, which in turn encloses the rest of your page. Then
html {background:white ...}
body {background:...}
could be changed to
body {background:white ...}
#div1 {background:...}
and, of course, with the addition of the positioning styles for the div if needed.Good idea King
Why didn't I think of that
Guess sometimes I'm not the sharpest tool in the toolbox
Hello. While the last post about having another div encompass your whole page inside the body will work it is not an elegant solution. The wonderful thing about div's is that as soon as they load they are displayed. The problem with a table layout is that the whole table has to load to work. If you put a div surrounding your whole page the whole page will need to load before anything is displayed. This is not what I would want for my site. You will have to find another solution, and unfortunately I do not have a better solution (I am trying to find one right now for my site), but until then I would just forget the second image until a solution is found.
axelhtml {background:white url(image1.png) 50% 100px no-repeat fixed;}
body {background:transparent url(image2.png) 50% 300px no-repeat fixed;}
when you do that make one at top
and one at bottom,
Cheers,
IsaacOriginally posted by isaac
I have two images which I want to use for a background - one at the top, and one underneath it. Is there any simple way to do this short of making one enormous image (the spacing would probably make it far too large)?
Depends on how your page look.
But you can put backgrounds in basicly any tag with CSS. Witout eg an URL to your page there is really not much more I can say.Well, lemme see if I can draw some ascii art:
|-------------------------------------|
| |
| |
| image one |
|-------------------------------------|
(space in between)
|-------------------------------------|
| |
| |
| image two |
| |
|-------------------------------------|
That's what I want the background to do, regardless of the contents of the page.
Is this possible?
CheersYes.
You are still abit vague about how you want the actual content to behave on the page as well as if the images should be fixed or scroll with the page.
Anyway in correctly working browsers you could set the 2 images with eg
html {background:white url(image1.png) 50% 100px no-repeat fixed;}
body {background:transparent url(image2.png) 50% 300px no-repeat fixed;}
If you need compability in older buggy browsers it howevere gets much more advanced since they don't understand setting backgrounds on the HTML tag.
That means you probably have to set 1 image on the <body> and then absolute position 1 image to where you want it on the page and then absolute position your entire ontop of the this image.Thanks, I'll try this. One question though - will this require I use an external stylesheet? Will it render properly because the <html> tag is before the <style> tag?
Just a thought..
CheersYou may be able to avoid using the html and body tag combination by using a div inside body, which in turn encloses the rest of your page. Then
html {background:white ...}
body {background:...}
could be changed to
body {background:white ...}
#div1 {background:...}
and, of course, with the addition of the positioning styles for the div if needed.Good idea King
Why didn't I think of that
Guess sometimes I'm not the sharpest tool in the toolbox
Hello. While the last post about having another div encompass your whole page inside the body will work it is not an elegant solution. The wonderful thing about div's is that as soon as they load they are displayed. The problem with a table layout is that the whole table has to load to work. If you put a div surrounding your whole page the whole page will need to load before anything is displayed. This is not what I would want for my site. You will have to find another solution, and unfortunately I do not have a better solution (I am trying to find one right now for my site), but until then I would just forget the second image until a solution is found.axelhtml {background:white url(image1.png) 50% 100px no-repeat fixed;}
body {background:transparent url(image2.png) 50% 300px no-repeat fixed;}
when you do that make one at top
and one at bottom,