Re: [css-d] Can you start a repeating background away from the edge of it's container?
Seona Bellamy wrote: I've spent about an hour Googling this one, and I'm getting lots of conflicting answers. I also can't get any of them to work, so I don't know if they're wrong or if I'm just messing something up. So can someone give me a definitive answer on whether you can start a repeating background away from the edge of its container? What I want is, for example, an image that repeats along the y-axis to start 50px from the top of its container and repeat all the way down from that point on. Cheers, Seona. No. Not as stated. But anything is possible. Given you are willing to state it, and do it, differently. Two containers perhaps? One 50px less wide than the other. The narrow container carries the image. Or does it? -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can you start a repeating background away from the edge of it's container?
Thanks everyone for your replies. I had tried the idea of putting the offset in the background-position property to no avail (it was one fo the things I was finding conflicting opinions on the effectiveness of, rather like here *grin*). As it turns out, I've managed to find a laughably simple solution to the problem. See, I already had two nested containers. I had a repeat-x background on the outer one to apply a slight gradient to the top of the page and then a repeat-y background on the inner container to apply a faux-columns effect. I needed the gradient to show above the two columns. This morning, I switched the backgrounds so that the gradient was on the inner container and the faux-columns was on the outer. *slaps forehead* Works a treat. It's amazing what you can achieve by walking away from a problem and getting a decent night's sleep... Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can you start a repeating background away from the edge of it's container?
On 18-Nov-08, at 11:56 AM, Seona Bellamy wrote:
What I want is, for example, an image that repeats along the y-axis
to start 50px from the top of its container and repeat all the way
down from that
point on.
#foo { background: #000 url(background.jpg) repeat-y fixed 0 50px;}
Best,
- Rahul.
Ref: http://www.w3.org/TR/CSS21/colors.html#propdef-background-position
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can you start a repeating background away from the edge of it's container?
On Nov 18, 2008, at 4:19 PM, Rahul Gonsalves wrote:
What I want is, for example, an image that repeats along the y-axis
to start 50px from the top of its container and repeat all the way
down from that
point on.
#foo { background: #000 url(background.jpg) repeat-y fixed 0 50px;}
Er, no, that won't do.
In short, with CSS 2.1 you can't do what you want, if I understand
correctly: position a background-image 50px from the top of the
container, and then repeat down from there.
When you think about: 'repeat-y' means repeat the image all over the
height of the container.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can you start a repeating background away from the edge of it's container?
OK, I made a reply to the author here with exactly the same method as Rahul,
but will stick my correction as a lame CSS 2.1 hack here. It requires
extra markup, but works until better alternatives are available (3).
div id=foodiv id=bar/div/div
Apply repeat-y to #foo and position a corner/top (or bottom/corner)
background-image for #bar (which has no explicit content and should
have zeroed-out padding and margins).
It's worked for me a couple of times.
On Mon, Nov 17, 2008 at 11:36 PM, Philippe Wittenbergh [EMAIL PROTECTED]wrote:
On Nov 18, 2008, at 4:19 PM, Rahul Gonsalves wrote:
What I want is, for example, an image that repeats along the y-axis
to start 50px from the top of its container and repeat all the way
down from that
point on.
#foo { background: #000 url(background.jpg) repeat-y fixed 0 50px;}
Er, no, that won't do.
In short, with CSS 2.1 you can't do what you want, if I understand
correctly: position a background-image 50px from the top of the
container, and then repeat down from there.
When you think about: 'repeat-y' means repeat the image all over the
height of the container.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Jonathan Berry, M.A.
IT Consultant
619.306.1712(m)
[EMAIL PROTECTED]
I think the real reason the Extropy Institute closed is because Ayn Rand
rose from her cryo-sleep -digibrill
( @ o )
/ | | | | \ Chumby.com
This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
