5 replies [Last post]
lancsDavid
lancsDavid's picture
Offline
newbie
Last seen: 3 years 2 weeks ago
Joined: 2011-11-09
Posts: 1
Points: 2

i've trying to make this site look like this...

proposed homepage

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?

basement31
basement31's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Joined: 2011-11-19
Posts: 6
Points: 7

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

You're both overthinking this.

You're both overthinking this.

lancsDavid wrote:

... 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.

basement31
basement31's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Joined: 2011-11-19
Posts: 6
Points: 7

Not sure how you'd add a

Not sure how you'd add a gradient using a full width background image?

greedesign
Offline
newbie
Edmonton, Alberta
Last seen: 2 years 46 weeks ago
Edmonton, Alberta
Timezone: GMT-7
Joined: 2012-01-07
Posts: 1
Points: 1

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

kochii02
kochii02's picture
Offline
newbie
USA
Last seen: 2 years 45 weeks ago
USA
Timezone: GMT+6
Joined: 2012-01-16
Posts: 1
Points: 1

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.