Re: [WSG] Tiling image problem
Hey Cole,
This might be another way, but have you tried it with extra markup? That is,
possibly using z-index to layer your containers?
Regards,
Sherwin
On 5/20/07, Cole Kuryakin [EMAIL PROTECTED] wrote:
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper
div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Tiling image problem
Sherwin, and all others who had responded to this thread -
This design is to be used in a blogging system and their HTML is already
hard-wired and cannot be changed - so that suggestion is out the window by
default.
However, I have convinced the client to dump the patterned background in
favor of a flat-colored alternative which means that I have been able to
execute the tile by adding the background color to the header element which
effectively masks the white tile in the wrapper.
So, thanks to all for responding to my query; but all is now well and I
shall stay well clear of headache causing background patterns for this
client.
Thanks again to everyone!
Cole
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Sherwin Techico
Sent: Thursday, May 24, 2007 2:53 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Tiling image problem
Hey Cole,
This might be another way, but have you tried it with extra markup? That is,
possibly using z-index to layer your containers?
Regards,
Sherwin
On 5/20/07, Cole Kuryakin [EMAIL PROTECTED] wrote:
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Tiling image problem
It depends the kind of layout you have.
The best and the easiest way to have the 300px in ur bg image itself,
eahtever clor you want.
regards
-P
www.puneetsakhuja.com/new
Original Message:
-
From: Cole Kuryakin [EMAIL PROTECTED]
Date: Mon, 21 May 2007 13:18:17 +0800
To: wsg@webstandardsgroup.org
Subject: [WSG] Tiling image problem
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
mail2web.com What can On Demand Business Solutions do for you?
http://link.mail2web.com/Business/SharePoint
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Tiling image problem
Hi Cole,
I think the problem is the repeat-y will fill the image vertically over the
entire contents no matter where you position it initially. You may try a
vertical 1px by 1000px (or taller than your page will ever be) image. And
use the following:
background:
url(/resources/5661/assets/images_medical/wrapper_vertical_tile.jpg)
repeat-x 0 300px;
Regards,
Kepler Gelotte
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Cole Kuryakin
Sent: Monday, May 21, 2007 1:18 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Tiling image problem
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***attachment: winmail.dat
Re: [WSG] Tiling image problem
Hi
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Should work, my suggestion is try it with a 770by2px image, I have had
weird problems with repeating 1px wide images in FF or Safari (can't
remember which one) I always used 2px wide images now.
--
Nick Cowie
http://nickcowie.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Tiling image problem
At 5/20/2007 10:18 PM, Cole Kuryakin wrote: I'm setting a 1px by 770px image to repeat vertically within a wrapper div. By the way, asking the browser to replicate a 1px-thick image will occupy a lot more CPU cycles than if you dimension your image to be fatter and replicate, for example, one that's 50px or 100px thick. In my experience the difference can be large enough to be perceptible by a human being, i.e. a significant fraction of a second or more for a large screen. Generating a fatter background image can therefore be seen as pre-processing with significant savings in real time. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Tiling image problem
Thanks to all for weighing-in on this one and appreciate the side-notes on 1px tall vs. 2px or more tall tiling background images. Unfortunate that we can't determine a vertical start-point for a tiling image but I've learned something new. Thanks again to everyone. Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Novitski Sent: Monday, May 21, 2007 2:54 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Tiling image problem At 5/20/2007 10:18 PM, Cole Kuryakin wrote: I'm setting a 1px by 770px image to repeat vertically within a wrapper div. By the way, asking the browser to replicate a 1px-thick image will occupy a lot more CPU cycles than if you dimension your image to be fatter and replicate, for example, one that's 50px or 100px thick. In my experience the difference can be large enough to be perceptible by a human being, i.e. a significant fraction of a second or more for a large screen. Generating a fatter background image can therefore be seen as pre-processing with significant savings in real time. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Tiling image problem
Hi Cole,
I think the problem is the repeat-y will fill the image vertically over the
entire contents no matter where you position it initially. You may try a
vertical 1px by 1000px (or taller than your page will ever be) image. And
use the following:
background:
url(/resources/5661/assets/images_medical/wrapper_vertical_tile.jpg)
repeat-x 0 300px;
Regards,
Kepler Gelotte
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Cole Kuryakin
Sent: Monday, May 21, 2007 1:18 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Tiling image problem
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***attachment: winmail.dat
RE: [WSG] Tiling image problem
Or you could do the same but make the first 300px of the images
transparent - so you don't need to bother about positioning 300px down.
On Mon, May 21, 2007 4:16 pm, Kepler Gelotte wrote:
Hi Cole,
I think the problem is the repeat-y will fill the image vertically over
the
entire contents no matter where you position it initially. You may try a
vertical 1px by 1000px (or taller than your page will ever be) image. And
use the following:
background:
url(/resources/5661/assets/images_medical/wrapper_vertical_tile.jpg)
repeat-x 0 300px;
Regards,
Kepler Gelotte
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Cole Kuryakin
Sent: Monday, May 21, 2007 1:18 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Tiling image problem
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper
div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Stuart Foulstone.
http://www.bigeasyweb.co.uk
BigEasy Web Design
69 Flockton Court
Rockingham Street
Sheffield
S1 4EB
Tel. 07751 413451
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Tiling image problem
At 5/20/2007 10:18 PM, Cole Kuryakin wrote: I'm setting a 1px by 770px image to repeat vertically within a wrapper div. Difference is that I need this repeat to START 300px from the top of the wrapper. I don't know a way to start a vertical tile 300px down the block. However, here are two workarounds: - Allow the tiling to begin at the top of the block, but begin the block 300px down the page. - Allow the tiling to begin at the top of the page, then overlay the top 300px with the alternate pattern. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
