Background image and drop shadow

Background image and drop shadow (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

womble -> Background image and drop shadow (3/24/2006 7:04:03)
I'm in the early stages of working at the moment on a site that I'm wanting to use a background image with a drop shadow as a background for (the image would just be a plain "box" with a drop shadow on the right and bottom). My problem is that it's likely that not all of the pages will be the same length so if I made the background image say 750 x 1200, on some pages it would be too long, and on others too short and the text would overspill the background image. Because of recycling images/using cached images etc. I didn't really want to have to specify a seperate image for each page. The only way I could think of to get round it would be to use a seperate image for different portions of the page, but I couldn't figure out how that would work because I'd still need multiple images potentially. Thoughts? Suggestions? (No code/url as yet - this is just a theoretical "can this be done?" at this stage)

Donkey -> RE: Background image and drop shadow (3/24/2006 7:33:35)
How about 3 divs one atop the other. The bottom one stays a fixed height and uses a fixed background image of the bottom of the box and the bottom shadow. The top one stays a fixed height and uses a fixed background image of the top of the box showing the shadow slightly offset from the top. The middle one is variable height and uses a thin "cross section" image set to repeat vertically. You might have to put the three into a container div to get it to work, and I'm not sure about the code without playing with it for several days but I imagine there is a way to do it.

womble -> RE: Background image and drop shadow (3/24/2006 8:54:47)
Ah Donkey! I think you may be onto something there! Like I said, nothing on screen yet, but I'm thinking with what I'm planning the page would naturally divide into three anyway, so that may work. Oh if only I had a brain I would indeed be a menace to society! [8D]

Tailslide -> RE: Background image and drop shadow (3/24/2006 9:35:41)
quote: ORIGINAL: Donkey How about 3 divs one atop the other. The bottom one stays a fixed height and uses a fixed background image of the bottom of the box and the bottom shadow. The top one stays a fixed height and uses a fixed background image of the top of the box showing the shadow slightly offset from the top. The middle one is variable height and uses a thin "cross section" image set to repeat vertically. You might have to put the three into a container div to get it to work, and I'm not sure about the code without playing with it for several days but I imagine there is a way to do it. This is more or less what I do on my current site.

womble -> RE: Background image and drop shadow (3/24/2006 10:52:26)
/makes mental note to self - "Before asking dumb questions on OF check out Tail's site to see how she's done it first" [sm=bowdown.gif] [;)]

reformed hater -> RE: Background image and drop shadow (3/24/2006 11:39:58)
quote: quote: ORIGINAL: Donkey How about 3 divs one atop the other. The bottom one stays a fixed height and uses a fixed background image of the bottom of the box and the bottom shadow. The top one stays a fixed height and uses a fixed background image of the top of the box showing the shadow slightly offset from the top. The middle one is variable height and uses a thin "cross section" image set to repeat vertically. You might have to put the three into a container div to get it to work, and I'm not sure about the code without playing with it for several days but I imagine there is a way to do it. Soooooooo confused [sm=icon_redface.gif]! excuse my ignorance or just completely stupidity. BUT could someone explain that again, please? this is exactly what I want to do, I was just going to make 2 images in Photoshop and slap them in a div, but Tail's site is soo nice.[sm=bowdown.gif]

womble -> RE: Background image and drop shadow (3/24/2006 11:50:33)
It's like dividing your rectangular image (assuming your page is rectangular) into three bits. Top div has a background image of the top part of the image you want to use and is a fixed height, i.e. the 'box' and some of the drop shadow on the right hand side. For the middle bit you take a small slice of the image (which in my case would be a rectangular white 'box' with the drop shadow on the right) and set the background on the middle div to repeat. The image need only be a few pixels wide - then you just repeat it vertically. Because it's not a fixed height, as you add more content, the div expands to hold all the content and becuase you've set the background image to repeat, as more content's in there, you ger more repeats of the background image and so the middle section of the page 'stretches'. Same as with the top div, your bottom div is a fixed height and is of the bottom of the box complete with the drop shadow on the bottom and right hand side. Viewed all together they just look like one image.

reformed hater -> RE: Background image and drop shadow (3/24/2006 12:05:39)
quote: For the middle bit you take a small slice of the image (which in my case would be a rectangular white 'box' with the drop shadow on the right) Now I get that. ok well then I guess my question (maybe) is the shadow? in your new project, Womble, are you drawing the shadow/& box w/ shadow somewhere else or is all that done using CSS.

spitfire -> RE: Background image and drop shadow (3/24/2006 12:06:34)
OR, if you are inclined towards fluid/flexi/elastic layouts: flexi-width with images flexi-width - look ma, no images I've even seen someone do it using the sliding-doors technique[:D]

reformed hater -> RE: Background image and drop shadow (3/24/2006 12:23:10)
quote: ORIGINAL: spitfire OR, if you are inclined towards fluid/flexi/elastic layouts: flexi-width with images flexi-width - look ma, no images I've even seen someone do it using the sliding-doors technique[:D] That's it simple clean and not a lot of writting!!!!!!! Just perfect for me the lazy guy.[:)]

Tailslide -> RE: Background image and drop shadow (3/24/2006 12:31:40)
quote: ORIGINAL: womble /makes mental note to self - "Before asking dumb questions on OF check out Tail's site to see how she's done it first" [:D] Yes 'cos I ALWAYS do it right!! It's a lot fiddlier with fluid layouts but it's certainly possible. Sliding doors techniques aside (keep meaning to try that but never get around to it) you can use a similar technique to the rounded corner thing where you use various hooks to attach the corners and the rest is just thin slivers of background image repeated.

Tailslide -> RE: Background image and drop shadow (3/24/2006 12:40:44)
quote: ORIGINAL: reformed hater but Tail's site is soo nice.[sm=bowdown.gif] Very kind - thank you. Feel free to add more compliments (the cheque's in the post).[;)] It's actually going - I'm having a complete change in the next few weeks - going to a more fluid layout. Just about halfway through the rebuild.

reformed hater -> RE: Background image and drop shadow (3/24/2006 14:55:58)
quote: ORIGINAL: Tailslide (the cheque's in the post).[;)] You "cheecky" Brits and your wierd language.[:D] Learn how to spell![8D]

spitfire -> RE: Background image and drop shadow (3/24/2006 15:14:09)
Uh, that's weird even in your language. Try Websters[:D]

Kitka -> RE: Background image and drop shadow (3/24/2006 15:15:38)
quote: You "cheecky" Brits and your wierd language. Look who's talking - you can't even use the spell checker! [sm=rolleyes.gif] [;)]

spitfire -> RE: Background image and drop shadow (3/24/2006 15:17:58)
"cheecky" could have been a play on words, Kitka. But, somehow, I doubt it [8D]

reformed hater -> RE: Background image and drop shadow (3/24/2006 15:57:28)
Hey you guys know how the American educational system is... look at our president[:)] PS I was just kidding. If I offended I apologize. [&o]

womble -> RE: Background image and drop shadow (3/24/2006 15:58:49)
quote: ORIGINAL: reformed hater You "cheecky" Brits and your wierd language.[:D] Learn how to spell![8D] And just who are you calling weird, huh? sigh Damned 'mericans - give 'em some independance, and what do they do? Start spelling stuff just how they please, driving on the wrong side of the road and electing a shrub to govern! [8D] In answer to your question RH, at the moment I'm using a mixture of graphics and css. I've got two test pages, one that's a graphic where the text isn't likely to overspill so I've done okay with just one graphic, and the other that at the moment's just plain css with no drop shadow (the subject of my query - I thought it was quite a good idea if all the pages kind of looked the same [;)]). I'd sort of got Donkey's response in the back of my mind somewhere, but unfortunately my brain's not fully functioning at the moment, but now with the appearance of Tail and Spit....oooooh it's all so exciting! Tail, you are indeed Queen of Cyberspace (I cannot recall the particular instance for which that title was bestowed upon you - there are of course so many instances of your brilliance), but Uncle B! (that's Sir Spitfire to you RH [;)]) Grpahic-less drop shadows! That's just. Just. Wow! [img]http://ganjataz.com/Forum/images/smiles/shake.gif[/img] I'm going to have a lovely weekend playing! [:)] Self Appointed President of the Tailslide Fan Club

spitfire -> RE: Background image and drop shadow (3/24/2006 16:04:34)
No excuse RH, the people of Florida votified for him and his brother. Where is it you live now? [:D] And Womble dear, I believe your Uncle B can claim authorship of "Queen of Cyberspace" following yet another bit of brilliance from Tail[8\|]

reformed hater -> RE: Background image and drop shadow (3/24/2006 16:11:50)
Not to mention our voting fiasco in the 2001 election... Florida is where the dumb people come to die.... So who wants to go to Disney?![&:]

spitfire -> RE: Background image and drop shadow (3/24/2006 16:18:11)
quote: ORIGINAL: reformed hater I was just kidding. If I offended I apologize. [&o] No offence taken, the Brits (and Kitka) are just indulging in a little Friday leg-pulling. it's a national sport, we aren't much good at any other sport. [:'(] Hey are there any Brits who would like an invitation to Andrew (Freddie) Flintoff's Benefit bash in May to celebrate a whole 10 years with Leicester Cricket Club. Tables seat 10 people. Executive tables for �4,000 each (+VAT) and VIP tables for �6,000 each (+VAT). You also get to buy (private) lottery tickets and bid for tat in an auction. What's all that about, poor old Freddie, running out of cash? [:@]

womble -> RE: Background image and drop shadow (3/24/2006 16:29:39)
quote: ORIGINAL: spitfire And Womble dear, I believe your Uncle B can claim authorship of "Queen of Cyberspace" following yet another bit of brilliance from Tail[8\|] You are indeed King of Cyberspace Uncle B [;)] (even though my dreams of doing "real life" stuff are now fading as I am drawn to a certain recently bookmarked page [:@][:D])

reformed hater -> RE: Background image and drop shadow (3/24/2006 16:54:10)
quote: It's actually going - I'm having a complete change in the next few weeks - going to a more fluid layout. Just about halfway through the rebuild. Can't wait to see what it is... God save the "queen"[;)]

spitfire -> RE: Background image and drop shadow (3/24/2006 17:11:03)
quote: ORIGINAL: reformed hater God save the "queen"[;)] Sung to the tune of My country 'tis of thee, I suppose[;)]

Tailslide -> RE: Background image and drop shadow (3/25/2006 8:34:56)
quote: ORIGINAL: spitfire following yet another bit of brilliance from Tail[8\|] Oh oh - what'd I say?

womble -> RE: Background image and drop shadow (3/25/2006 8:54:20)
probably something about doctypes [:D][;)]

spitfire -> RE: Background image and drop shadow (3/25/2006 9:16:23)
quote: ORIGINAL: Tailslide Oh oh - what'd I say? Nothing toooo controversial, petal. But we haven't seen your re-designed logo yet[&:]

womble -> RE: Background image and drop shadow (3/25/2006 9:21:41)
[sm=lol.gif]

Page: [1]

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

8.984375E-02