Basic CSS query

[KiwiBrian]

I wish to have an image tile down the right hand side of the fluid page as
if it was part of the background.
The intention is to have the page imitate the look of an American football
pitch with the markings down each side of the page.
I have a tiling graphic as the background which takes care of the page
background and the left side markings.
I have created an image to tile down the right side showing the markings,
but need to know how to control it in the CSS.

A second aspect to the query is how would I specify that the total
background effect be:-
(1) Stationary as the page is scrolled vertically,
(2) Scroll with the page contents.

Many thanks
Brian Tozer

 

[Brian]

I wish to have an image tile down the right hand side of the fluid page as
if it was part of the background.
The intention is to have the page imitate the look of an American football
pitch with the markings down each side of the page.
I have a tiling graphic as the background which takes care of the page
background and the left side markings.
I have created an image to tile down the right side showing the markings,
but need to know how to control it in the CSS.

with background and related properties.

http://www.w3.org/TR/REC-CSS2/colors.html#q2

Something like

body {
background-image: url("marble.gif") ;
background-position: top-right ;
background-repeat: repeat-y ;
}

A second aspect to the query is how would I specify that the total
background effect be:-
(1) Stationary as the page is scrolled vertically,
(2) Scroll with the page contents.

These two are contradictory, of course. In order, it's
background-attachment: fixed ;
background-attachment: scroll ;

 

[Greg Schmidt]

with background and related properties.

http://www.w3.org/TR/REC-CSS2/colors.html#q2

Something like

body {
background-image: url("marble.gif") ;
background-position: top-right ;
background-repeat: repeat-y ;
}

I think that this may not help, as he says he already has a background
graphic for the left side of the page. AFAIK there is no way to put two
background images on (under?) the same element. The only thing that
comes to mind is to put a narrow DIV on the right side, just wide enough
for the graphic, but that implies using HTML for presentation, plus
you'll be back shortly posting about how to get it to go all the way to
the bottom of the page. I guess you might be able to do something
involving tables or frames, but that's like using a hammer for brain
surgery.

 

[KiwiBrian]

Brian wrote

Maybe something like: http://porjes.haxorz.org/one.html

Wonderful!!!
Thanks so much.
It doesn't matter, but I am interested in why the side graphics are not
fixed. They scroll with the page even tho the CSS says fixed. I am using
IE6.

#all1 {
background: transparent url('gridbck1.jpg') top left repeat-y fixed;
}
#all2 {
background: transparent url('gridbackright.jpg') top right repeat-y
fixed;
padding: 1ex 80px;
}

Brian Tozer

 

[Leif K-Brooks]

It doesn't matter, but I am interested in why the side graphics are not
fixed. They scroll with the page even tho the CSS says fixed. I am using
IE6.

Because IE sucks.