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
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
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
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] ***<>
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
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
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
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] ***<>
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
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] ***
[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] ***<>