How to repeat a background image on the left side and another on the right side of a web page?
in [CSS]
|
Prev: How to stretch a background (!) image horizontally (only) ?
Next: IE7 on Windows Vista displays half-transparent area as opaque
From: dorayme on 16 Mar 2010 18:41 In article <1316119.vCJZsxu672(a)PointedEars.de>, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > dorayme wrote: > > > Scott Bryce <sbryce(a)scottbryce.com> wrote: > >> dorayme wrote: > >> > <http://dorayme.netweaver.com.au/two_vert_bgBorders.html> > >> [...] > > > > [...] > > (There are two problems on that page, the one in italics and the > > one that occupied the sultan's mind.) > > Yes, if scrolling is necessary the right background image is 1. moving > upwards (or was this intentional?) Both backgrounds move up in my Safari. (But good of you to draw attention to this. It might be better in the spirit of OP's request, to have it fixed. This can be done in the case of the left bg image by adding 'fixed' to the shorthand background. A point of further discussion might be how to get the right to ditto. But you solve in your suggestion below.) > and 2. not going to be repeated beyond > the height of the viewport. You should therefore define > > #wrapper { > position: absolute; > overflow: auto; > ... > background-position: right top; > ... > } > Well done Thomas, this is good and I now publish in your honour: <http://dorayme.netweaver.com.au/two_vert_bgBorders_ears.html> > The `height: 100%' declarations for HTML and BODY element appear to be > unnecessary then. Tested in Iceweasel 3.5.8 (Gecko 1.9.1.8). > Quite so on my tests too. > Thank you for the puzzles. > -- dorayme
From: Thomas 'PointedEars' Lahn on 16 Mar 2010 21:47 dorayme wrote: > Thomas 'PointedEars' Lahn wrote: >> dorayme wrote: >> > Scott Bryce <sbryce(a)scottbryce.com> wrote: >> >> dorayme wrote: >> >> > <http://dorayme.netweaver.com.au/two_vert_bgBorders.html> >> >> [...] >> > [...] >> > (There are two problems on that page, the one in italics and the >> > one that occupied the sultan's mind.) >> Yes, if scrolling is necessary the right background image is 1. moving >> upwards (or was this intentional?) > > Both backgrounds move up in my Safari. (But good of you to draw > attention to this. It might be better in the spirit of OP's > request, to have it fixed. This can be done in the case of the > left bg image by adding 'fixed' to the shorthand background. A > point of further discussion might be how to get the right to > ditto. But you solve in your suggestion below.) I meant instead that the right background image is currently vertically centered, which may or may not be intentional. >> and 2. not going to be repeated beyond the height of the viewport. >> You should therefore define >> >> #wrapper { >> position: absolute; >> overflow: auto; >> ... >> background-position: right top; >> ... >> } > > Well done Thomas, this is good and I now publish in your honour: > > <http://dorayme.netweaver.com.au/two_vert_bgBorders_ears.html> Thank you. I am not satisfied with the vertical scrollbar covering the right image, though. Therefore, it would appear to be best to use three nested elements, two with background image and the innermost to provide the scrolling. There is an extra inner DIV, so we could reuse that: body { margin: 0; background: url(left.jpg) repeat-y left top; } #wrapper { position: absolute; margin: 0 0 0 60px; height: 100%; background: url(right.jpg) repeat-y right top; padding: 0 60px 0 0; } #wrapper > div { height: 100%; overflow: auto; padding: 0 10px 0 0 } PointedEars P.S.: Call me "PE" if you must, but not "ears". TIA.
From: dorayme on 16 Mar 2010 22:39 In article <2050046.Kz687JKscX(a)PointedEars.de>, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > dorayme wrote: > > > Thomas 'PointedEars' Lahn wrote: > >> dorayme wrote: > >> > Scott Bryce <sbryce(a)scottbryce.com> wrote: > >> >> dorayme wrote: > >> >> > <http://dorayme.netweaver.com.au/two_vert_bgBorders.html> > >> >> [...] > >> > [...] > >> > (There are two problems on that page, the one in italics and the > >> > one that occupied the sultan's mind.) > >> Yes, if scrolling is necessary the right background image is 1. moving > >> upwards (or was this intentional?) > > > > Both backgrounds move up in my Safari. (But good of you to draw > > attention to this. It might be better in the spirit of OP's > > request, to have it fixed. This can be done in the case of the > > left bg image by adding 'fixed' to the shorthand background. A > > point of further discussion might be how to get the right to > > ditto. But you solve in your suggestion below.) > > I meant instead that the right background image is currently vertically > centered, which may or may not be intentional. > Can't see this in any of my Mac browsers? > >> and 2. not going to be repeated beyond the height of the viewport. > >> You should therefore define > >> > >> #wrapper { > >> position: absolute; > >> overflow: auto; > >> ... > >> background-position: right top; > >> ... > >> } > > > > Well done Thomas, this is good and I now publish in your honour: > > > > <http://dorayme.netweaver.com.au/two_vert_bgBorders_ears.html> > > Thank you. I am not satisfied with the vertical scrollbar covering the > right image, though. Therefore, it would appear to be best to use three > nested elements, two with background image and the innermost to provide the > scrolling. There is an extra inner DIV, so we could reuse that: > > body { > margin: 0; > background: url(left.jpg) repeat-y left top; > } > > #wrapper { > position: absolute; > margin: 0 0 0 60px; > height: 100%; > background: url(right.jpg) repeat-y right top; > padding: 0 60px 0 0; > } > > #wrapper > div { > height: 100%; > overflow: auto; > padding: 0 10px 0 0 > } > Another possibility, yes. It is as if we are refining a possible page in a possible world. My old Mac IE5 does mean things to this. It it is rooted in *this world as it was in 1999* <g> > PointedEars > > P.S.: Call me "PE" if you must, but not "ears". TIA. I called you Thomas, read my post. The ears was part of a file name, not your name. "bore" is not a word in "boring", "b" "o" "r" and "e" are in "boring" as is the order of the letters. But the word "bore" is not in it. Please see these fine logical distinctions. Thank you in advance. -- dorayme
From: Thomas 'PointedEars' Lahn on 17 Mar 2010 04:43 dorayme wrote: > Thomas 'PointedEars' Lahn wrote: >> dorayme wrote: >> > Thomas 'PointedEars' Lahn wrote: >> >> dorayme wrote: >> >> > Scott Bryce <sbryce(a)scottbryce.com> wrote: >> >> >> dorayme wrote: >> >> >> > <http://dorayme.netweaver.com.au/two_vert_bgBorders.html> >> >> >> [...] >> >> > [...] >> >> > (There are two problems on that page, the one in italics and the >> >> > one that occupied the sultan's mind.) >> >> Yes, if scrolling is necessary the right background image is 1. >> >> moving upwards (or was this intentional?) >> > >> > Both backgrounds move up in my Safari. (But good of you to draw >> > attention to this. It might be better in the spirit of OP's >> > request, to have it fixed. This can be done in the case of the >> > left bg image by adding 'fixed' to the shorthand background. A >> > point of further discussion might be how to get the right to >> > ditto. But you solve in your suggestion below.) >> >> I meant instead that the right background image is currently vertically >> centered, which may or may not be intentional. > > Can't see this in any of my Mac browsers? Make the window less high, so that there are vertical scrollbars. You should see the more greyish part of the right background image at the vertical center of the viewport (as opposed to at the bottom of it), the right margin becoming fully grey if the viewport height is reduced to about 150 pixels, or your Mac browsers (which ones?) have a bug. >> > > [CSS code] >> > Well done Thomas, this is good and I now publish in your honour: >> > >> > <http://dorayme.netweaver.com.au/two_vert_bgBorders_ears.html> >> >> [...] I am not satisfied with the vertical scrollbar covering the >> right image, though. Therefore, it would appear to be best to use three >> nested elements, two with background image and the innermost to provide >> the scrolling. There is an extra inner DIV, so we could reuse that: >> >> [CSS code] > > Another possibility, yes. It is as if we are refining a possible > page in a possible world. My old Mac IE5 does mean things to > this. It it is rooted in *this world as it was in 1999* <g> I beg your pardon? >> P.S.: Call me "PE" if you must, but not "ears". TIA. > > [...] The ears was part of a file name [...] A resource name ending in "_ears.html", to which I object(ed). Make it "*_PointedEars.html" or remove the name or file, please. Anything else is _not_ "publishing in my honor" as you said, quite the opposite. It is as if I named a resource "_me.html" and said I published it "in your honor"; you would probably object to that, too. That said, proper attribution is usually paid with text in the resource content rather than in the resource name as the resource name depends on the circumstances of viewing. For example, using META elements or writing the name of the contributor in the BODY. Compare: <http://pointedears.de/hoverMe/> (uses META elements) PointedEars
From: dorayme on 17 Mar 2010 05:23
In article <1417031.9FEqZaRXLX(a)PointedEars.de>, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > PointedEars Publish your own URLs if you are not happy with the praise I publicly heaped on your miserable skin on usenet. -- dorayme |