Jump to content

- - - - -

How to use a background "glare"...

  • Please log in to reply
1 reply to this topic

#1 ryanjohnjackson


    Super Member

  • Members
  • 143 posts

Posted 28 November 2011 - 05:45 AM

I'm very much a n00b and at one point I used Artisteer. Artisteer has a pretty awesome background image feature called "glare". You basically have 2 background images. One is your real background and the second is an image that sits over it but below your content. It would also need to be partially transparent.

Posted Image

Notice the black/greyish area? That is what Artisteer calls a "glare". Not sure if this is a normal thing to do but I can't seem to find anything on it.


#2 Rob


    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 November 2011 - 06:14 AM

I've seen this done with quite a bit of custom CSS by some very skilled coders. But there's an easy way in case you're less proficient at coding. How are you with graphics? Essentially, you can create a layer on a very large background image that's got a degree of transparency (graphics editors like Corel's Paint Shop Pro, Photoshop and others let you create these easily). Then you simply add that semi-transparent layer over the image, centering it to just where you want it. Set it as the background in your site with Full Width Design Framework (not canvas) and position it to vertical/top position 0 (zero) and horizontal to 50 (fifty). Add your branding logo as normal and you should have the exact same effect without two images. Keep one copy of your original background without the layer (in case you need to do it again) and another with the layers not merged (flattened) so you can make adjustments and use the third layer which is flattened on the site. A .png file will work nicely.