Blending Background Images and Colors

I ran into an odd situation where I was using a background image that was a gradient (with a light color turning darker from top to bottom). The gradient background, which is 1 pixel wide by 500 pixels high, would be positioned at the top and repeat across the horizontal axis. As you moved down the page, the background would eventually blend into the background color. For example, here is the CSS code:

body { background: #e75210 url(/images/main/bg.jpg) repeat-x top; }

This worked greate in Firefox and Internet Explorer. However, in Safari, I ended up with the following:

Not too sexy, right? Turns out that I wasn’t saving my JPG image for web format in Photoshop. I was saving it as a straight JPG image at a medium quality setting. Once I saved the image for web, Safari was happy and now I get the same experience in all three browsers.

1 Comment to Blending Background Images and Colors

1. 

   Post Update: Apologies, but it seems I fell asleep at the wheel earlier in the week when I put this post together. I have corrected the original post to talk about a 1 pixel wide image instead of a 1920px wide image. It just so happens that I like to start with large images to create my gradients and then cut them up into a very small sliver for rendering on the web. So a 1×500px image is only 1K in size. Using a little CSS trickery (as shown in the code above), you can create a perfect gradient blend of color for your web site background. Just remember to save the image for web so that Safari will be happy.
Brooke Kuhlmann on August 27th, 2008

Leave a comment

You must be logged in to post a comment.