Rate This Article
Tips and Tricks
Beware, this article is full of some geeky content. Most articles here are about general design philosophy and using web and design in your church. However, once in a while I want to throw some tips and tricks in to help new designers do cool stuff. So, today it's all about learning a new trick using Photoshop and CSS to make a visually pleasing webpage background.
I remember when I started using CSS, I would visit lots of websites where the page's background looked more 3D than any pages I made. It was a very subtle effect but it made all the difference. What I'm talking about is creating a background that gradiates from one color to another, giving an artificial lighting effect. Here's how you go about making it happen.
Starting in Photoshop
The first thing to know is that the gradient is done with an image, not pure CSS. So, your first step will be to create an image in Photoshop. Create an image very thin, but tall enough to gradiate slowly. (see my sample source image here. It may be tough to see, but it gradiates from a black at the top down to a dark blue at the bottom) Before you export it, take note of the hex color of the very bottom of the image. In the case of this image, it's #000033. Remember this beceause you'll use it in a minute. Do a "save for web" and export the image as a jpg. (don't use a gif for gradients...if you do, you'll see why: it looks terrible!) Upload this image to your server and remember the path.
Write Your HTML
Ok, this part is a no brainer. Create your page. Do whatever you'd like. We don't really need any special tags or anything, because the gradient background is going to be applied to the body tag, which all html documents must have. So, just to keep it basic, my code will look something like this:
So, nothing special here. Just an HTML page with one line of text content. Let's move onto CSS where the magic happens.
The CSS Magic
Ok, so now let's do our thing. We've got our image created and uploaded, and our html all set....well almost. Normally I'd do this in a separate style sheet, but for the sake of easy explanation, I'm going to put my css styles right within my html. The only tag we need to change is the body tag. We'll change it from just a standard body tag to:
What's this doing? Here's the deal:
- First, we're using CSS to tell the webpage to display a background image anywhere there's the body tag (which is the entire page). And, we're telling it to use our gradient graphic that we uploaded. By default, a background-image starts in the top left corner of your content area, and we're fine with that, because that's what we want. If you wanted it to start elsewhere you could use the background-position property in CSS.
- However, by default, a background-image repeats from left to right and from top to bottom. But we don't want this. We only want it to repeat from left to right. (the reason will be plain in a minute) So, we then use the background-repeat property to tell the background to only repeat along the x-axis .
- And, finally, we set the background of the entire body to be the color which is at the bottom of our gradient graphic. So, when the graphic doesn't repeat down, but there's content down there, you get a seamless transition between our background graphic and the rest of our page.
So, there you have it. A page with a nice repeating background gradient. If you did everything correctly,
Hopefully that tip is useful to some folks, because I wish there had been an easy answer when I was looking for it....Peace, Love and Background-Gradients.