-
-
-
-
-
Sponsored Ads
-
Recent Readers
Creating a Faded Web Page Background Image
This is something that I have been interested in for quite some time but have never gotten around to looking into how to do it until today.
The process is really simple you just need the right code and then the image. To create the image you will need Adobe Photoshop. I know that not everyone will have this program so you can find 30 free images at BittBox.
Now for those that have Photoshop; the size of the image is 1px x 500px and to give the faded apperance you use the gradient tool. Click the tool then take the cursor and drag it done the middle of your image. The image results afterwards is in the screen shot below before I used the tool the image was just the dark gray at the top. There are other opitions with the gradient tool besides the one that I used; that you can use for different background effects.
The Code for Wordpress & Blogger:
Wordpress:
Presentation => Theme Editor => Style.cssFind the body { and add the url for the image like below:
background: #E7E9E9 url(’http://jakeldaily.com/grayfade.png’) repeat-x;Blogger:
Settings => Template => Edit HTML =>Find the body { and add the url for the image like below:
background: #E7E9E9 url(’http://jakeldaily.com/grayfade.png’) repeat-x;
The #E7E9E9 is the color that will display at the bottom after your image repeats horizontal once across the top. The URL of course is to the location of your image file and .gif, .jpg, .png will all work with the code. Bloggers you must have some type of hosting or image storage.
What are your thoughts on faded web page backgrounds?
comments
Maybe You Missed These Posts:
- Twenty Four Posts In 24 Hours!
- Wordpress Rotating Header Images no Plugins
- Make Money with A Lasting First Impression
- Adobe Photoshop Picture Title Layers
- 5 Tips for Writing Website Content
- Blog Tips and Celebrity Gossip One Domain
- One Two Three bla.st Off
8 Responses to “Creating a Faded Web Page Background Image”
Leave a Reply
If you want to save some bandwidth and make you page load faster try making the source image only 1px wide. It will look exactly the same and load muh quicker.
Andy
Thanks Andy change made and works new size 1px X 500px.
No Probs, happy to help!
Andy
Oh my god, the Andy´s Tip is good. Nice one, Jakel.
I like the gradient look you have, it seems to make this design a little more unique.
Thanks much appreciated
Thank you very much for this article! I’m currently working on updating my site’s look. This was very useful. I was able to achieve the exact background I wanted.
Great tip.
I’m using StudioPress Lifestyle theme and thought this could be good to add a watermark to content pages,.. so I inserted the code into style.css under; content/.postarea {
background: #FFFFFF url(images/watermark.jpg) repeat;
….and it works wonderfully!
Thanks. Russ