Creating a High Resolution Background image for your Website or Blog
It’s always nice to have background decoration on your web site but seamless pixel patterns are a bit outdated to use for them.Having dramatically higher resolution sizes on every platform it’s no wonder high resolution images are preferred from both designers and users.Since placing elements with HTML is no guesswork,here’s a few tips in creating a basic high resolution Background to be used on your site.
I use Gimp for most of my image work but the concepts are the same in every similar software(i.e Adobe Photoshop) unless you’re using something like Autodesk’s Sketchbook.
The resulting image is to be styled using CSS with the HTML or BODY tag on a layout that uses a 1000 Pixels Width for the main content.
Step 1:Making a Workable Template
- Create a New 1000px by 1000px image and fill it with a background color(I used White)
- Make Two Vertical Guides by Percent,one at 0% and the other at 100%,
- Finally Resize Canvas Width(only) to 1800px (can be any width you need),
Now you have an image that looks like the one below with your two Guides that are the exact outer left and right edges of your old 1000 Pixels width layout,
Step 2:Making the Background and Modifying the surrounding area
On this step we’ll be playing around with colors to make it all fit together.
- Put any image you need to use as background
- Create a New Layer,put it at the Top
- Now,using a the Softest and Maximum sized brush paint around the image as show below(use the color that will be the CSS Background i.e white for this one)
Take care not to leave any edges of the image visible.Remove the First Layer we created for the guides and export the jpeg.
You should use either the HTML or BODY tag to style a bottom background.The simple CSS to place the Background on the webpage should look like this;
background: url('WEBSITE-LAYOUT-1000-PIXELS.png') top center no-repeat white;
If you are looking for a Transparent Background tutorial or need a more optimized result see :How to use a Transparent Image over a One Pixel Wide Gradient Background.