1

I want to have a vignetting effect on the background of a page I´m building. This is the page: www.karolinadahl.se

I managed to get the effect I´m looking for in Firefox, and it seems to work ok. In Safari I get some kind of vignetting, though not quite what I´m looking for and the inset shadow slows the page down tremendously for some reason. Im using Safari 5.

I don't think it works in Explorer at all and I don't know about Chrome and Opera.

Is there a smarter way of achieving this effect on the background?

Isaac Lubow
  • 3,557
  • 5
  • 37
  • 53
Johan Dahl
  • 1,672
  • 3
  • 19
  • 35
  • That is strange, I see it in Firefox 5 and 6. Might be my host, I´ve had problems all day with my changes not showing up, css only partly read etc. Try again later plz :) – Johan Dahl Aug 02 '11 at 14:32

1 Answers1

1

You're applying the effect correctly, however, these effects are

  • Not fully supported, which explains your problem with IE
  • Known to render differently from browser to browser

Still, time is on your side. Support will only improve. For a web-site still in development, I'd say stick with the CSS3 techniques rather than older, hackier solutions.

You could also try a gradient in the background. Might be more consistent.

Isaac Lubow
  • 3,557
  • 5
  • 37
  • 53
  • Thanks. Could it be done more concistently with, say, a radial gradient background on top of the regular background? Where the radial gradient would go from say 80% black to 0% i the center. Would such a thing be possible? – Johan Dahl Aug 18 '11 at 11:30
  • 1
    As far as I know, it is. See [here](http://www.westciv.com/tools/radialgradients/index.html) for an example of how to generate the markup. – Isaac Lubow Aug 18 '11 at 16:24