Wed, 2011-11-09 20:22
i've trying to make this site look like this...
most of it i can do, but the way the central div has a fading gradient on the outside (fades grey to transparent) i'm having trouble with
the page has the <html> element, with the <body> inside, & the content area with everything in it (which centres as you enlarge the browser window) is a <div> with its own ID attribute
i mean, i wanna put a vertically short, virtually full width tile gradient somewhere so that it shows up on the outside of the central
anyone any ideas?
Sat, 2011-11-19 19:00
#1
You could use the
You could use the border-image property on the div but that's a little unsupported, you could also use box-shadow but you might not want to because of the same reasons.
Edit: looks like the perfect excuse to progressively enrich using box-shadow
Other than adding an additional div for the background you could probably use :before pseudo element on the div itself?
If the content div is a set width you could just use a normal background on the container and position it x width from the right.
Sat, 2011-11-19 22:52
#2
You're both overthinking this.
You're both overthinking this.
... i mean, i wanna put a vertically short, virtually full width tile gradient somewhere so that it shows up on the outside of the central
anyone any ideas?
Just make one background image for the entire width. No need to make one behind the other.
Sun, 2011-11-20 18:01
#3
Not sure how you'd add a
Not sure how you'd add a gradient using a full width background image?
Sat, 2012-01-07 07:30
#4
You have alot of options here
You have alot of options here however what I usually do now is utilize the latest CSS techniques, in this case box-shadow, and then provide the best degraded experience as you can to legact users. However in this case ie8 does not support box-shadow so that maybe not work for you. If you want to use the box-shadow just add box-shadow: 0 0 30px rgba(0,0,0,0.8); to your centered container elements. Depending how you have it built this may not work.
There are ways of using a centered transparent png and your wrapper elements to achieve this however im not sure if you are using primary just background colours for all of your full width elements and all of these things would come into play with your solution.
If your still stumped shoot me a message and we can dig a little deeper.
Cheers
Mon, 2012-01-16 15:29
#5
you need to stretch the background.
This will help if you stretch the background using CSS 3. Did you try this? You should apply 0px for padding and margins. Fill the border with solid color and instead of this you can use an image as a background. Hope this will do help.