Hiding text behind an image

Warren Post

At <http://snow.prohosting.com/srcopan/dry/test.es.html>, you will see
that the background image runs down the left margin. The right hand side
of it is faded, watermark style, but it is one single image.

my intention is for the header and text to appear to the right of the
unfaded portion of the image, and on top of the watermarked portion. At
most viewport widths it works as intended. However, if the viewport is
narrowed enough to require horizontal scrolling, the header and text slide
over the background image. This does not surprise me (it's a _background_
image, after all) but it is not my intention.

My intention is that when horizontal scrolling is required, the unfaded
portion of the image not be obscured, as if the text were sliding under
it. What I do not know is how to do this. Clip? Chop the image into two
parts and give the unfaded part a higher z-index than the text? All ideas
welcome. Feel free to comment upon anything else you might notice as well.

Many thanks,
--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

Sep 12 '06 #1

Spartanicus

Warren Post <wp***@hondutel.hnwrote:

>At <http://snow.prohosting.com/srcopan/dry/test.es.html>, you will see
that the background image runs down the left margin. The right hand side
of it is faded, watermark style, but it is one single image.

my intention is for the header and text to appear to the right of the
unfaded portion of the image, and on top of the watermarked portion. At
most viewport widths it works as intended. However, if the viewport is
narrowed enough to require horizontal scrolling, the header and text slide
over the background image.

I presume you mean over the unfaded part of the background image?

>This does not surprise me (it's a _background_
image, after all) but it is not my intention.

I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?

--
Spartanicus

Sep 12 '06 #2

Bill Norton

"Spartanicus" wrote

I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?

In IE the two (missing) images on the right eventually get pushed over onto
the unfaded background. Is that what you are talking about, Warren?

Sep 12 '06 #3

Warren Post

El Tue, 12 Sep 2006 22:05:55 +0100, Spartanicus escribió:

Warren Post <wp***@hondutel.hnwrote:

>>...if the viewport is
narrowed enough to require horizontal scrolling, the header and text
slide over the background image.

I presume you mean over the unfaded part of the background image?

Correct. Sorry for my ambiguity.

>>This does not surprise me (it's a _background_ image, after all) but it
is not my intention.

I'm not seeing that, what browser are you seeing this with? Can you
provide a screenshot?

Firefox 1.5, Opera 9.0, IE 6, all on Linux (the latter running within
Crossover Office).

I have posted two screenshots. They were taken with Firefox, but I see the
same thing in Opera and IE. The first screenshot
<http://snow.prohosting.com/srcopan/dry/screenshots/1.jpgshows the
viewport narrow enough to require horizontal scrolling, but I have not yet
scrolled. Everything looks fine here. Then I scroll horizontally in the
second screenshot
<http://snow.prohosting.com/srcopan/dry/screenshots/2.jpg>. The header
image, top navigation bar, and content text all slide over the unfaded
part of the background image.

Thanks again for your help,
--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

Sep 13 '06 #4

Warren Post

El Tue, 12 Sep 2006 23:47:40 +0000, Bill Norton escribió:

In IE the two (missing) images on the right eventually get pushed over
onto the unfaded background. Is that what you are talking about, Warren?

No, although to clarify what I mean I have simplified my example somewhat
and provided a sample image. See my reply to Spartanicus for screenshots.

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

Sep 13 '06 #5

Spartanicus

Warren Post <wp***@hondutel.hnwrote:

>Then I scroll horizontally in the
second screenshot

Scrolling horizontally was the missing bit of data.

Specifying "background-attachment:fixed" pins your image to the viewport
http://www.w3.org/TR/CSS21/colors.ht...und-attachment

A brief explanation of the relevant phrases, just in case you are not
familiar with them: the "viewport" is the visible area inside a browser
document window or tab, it is your view onto the document, or part view
if the viewport isn't big enough to display it all. "Underneath" the
viewport lies the "canvas", this is the area on which the document is
rendered.

If the content doesn't fit in the viewport then the browser will
generate scollbars. By using the scrolling mechanism you effectively
move the viewport over the (in this case larger) canvas to enable you to
see the remaining content. During scrolling a
"background-attachment:fixed" image will remain pinned to the viewport,
not the canvas.

With CSS2.x it is not possible to have an image positioned with respect
to the viewport for vertically overflowing content, whilst positioning
it with respect to the canvas for horizontally overflowing content.

--
Spartanicus

Sep 14 '06 #6

Warren Post

El Thu, 14 Sep 2006 09:15:13 +0100, Spartanicus escribió:

Warren Post <wp***@hondutel.hnwrote:

>>Then I scroll horizontally in the
second screenshot

Scrolling horizontally was the missing bit of data.

Specifying "background-attachment:fixed" pins your image to the viewport
http://www.w3.org/TR/CSS21/colors.ht...und-attachment

A brief explanation of the relevant phrases, just in case you are not
familiar with them: the "viewport" is the visible area inside a browser
document window or tab, it is your view onto the document, or part view
if the viewport isn't big enough to display it all. "Underneath" the
viewport lies the "canvas", this is the area on which the document is
rendered.

If the content doesn't fit in the viewport then the browser will
generate scollbars. By using the scrolling mechanism you effectively
move the viewport over the (in this case larger) canvas to enable you to
see the remaining content. During scrolling a
"background-attachment:fixed" image will remain pinned to the viewport,
not the canvas.

With CSS2.x it is not possible to have an image positioned with respect
to the viewport for vertically overflowing content, whilst positioning
it with respect to the canvas for horizontally overflowing content.

Yes, and in fact pinning the image of the bottle to the viewport, not the
canvas, is what I intended. I wish the image to remain fixed relative to
the viewport even when the content is scrolled horizontally. Hence my use
of background-attachment:fixed.

What I am looking for is ideas on how to obscure that part of the content
that now overlays the unfaded part of the background image when the
content is horizontally scrolled. The appearance I seek is that the
bottle is over, not under, the horizontally scrolled content.

My code as it stands doesn't cut it, but more to the point, I am unsure
conceptually how to proceed. I could of course not set the bottle as a
background image and give it a higher z-index than the content, but then
it would not be fixed relative to the viewport. All ideas welcome (and
thanks, Spartanicus and Bill, for your observations thus far).

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

Sep 14 '06 #7

Spartanicus

Warren Post <wp***@hondutel.hnwrote:

>What I am looking for is ideas on how to obscure that part of the content
that now overlays the unfaded part of the background image when the
content is horizontally scrolled. The appearance I seek is that the
bottle is over, not under, the horizontally scrolled content.

I see. This could be done using a position:fixed element with the
unmasked half of the bottle as a background, but IE doesn't support
position:fixed, and it would result in partially masked content when
scrolled horizontally, text would become unreadable.

Best just let the bottle scroll.

--
Spartanicus

Sep 14 '06 #8

Warren Post

El Thu, 14 Sep 2006 22:29:26 +0100, Spartanicus escribió:

...This could be done using a position:fixed element with the unmasked
half of the bottle as a background, but IE doesn't support position:fixed,
and it would result in partially masked content when scrolled
horizontally, text would become unreadable.

Best just let the bottle scroll.

I see what you mean, and yet my client is pretty insistent on having this.
I'll ponder this some more. Thanks for your thoughts, Spartanicus.

--
Warren Post
Santa Rosa de Copán, Honduras
http://srcopan.vze.com/

Sep 15 '06 #9