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

  1. Create a New 1000px by 1000px image and fill it with a background color(I used White)
  2. Make Two Vertical Guides by Percent,one at 0% and the other at 100%,
  3. 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.

  1. Put any image you need to use as background
  2. Create a New Layer,put it at the Top
  3. 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.

That’s it!

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.


4 Responses to Creating a High Resolution Background image for your Website or Blog

  • Wordpress Designer says:

    Naturally like your website

  • article says:

    This article is actually a good one it assists new internet visitors, who are wishing for blogging.

  • Leon Argall says:

    I dugg some of you post as I thought they were very helpful extremely helpful

  • Dennis Roessing says:

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). “,

Leave a Reply

Your email address will not be published. Required fields are marked *

Who am I

Hi my name is Stéphane,
I am a Digital Artist,Musician and Wordpress addict.I love creating compelling Wordpress themes that are visually tailored to my client's needs or previous HTML designs.Whether you want a Wordpress Blog to match your existing template or simply want a new custom Wordpress Theme just contact me I am meticulous and I love working with serious people with high requirements.


Copyright ©2011-2017 Intelligent Web Designer Wordpress Artist All rights reserved. Any redistribution or reproduction of part or all of the contents in any form is prohibited other than the following. 1)you may print or download to a local hard disk extracts for your personal and non-commercial use only, 2)you may copy the content to individual third parties for their personal use, but only if you acknowledge the website as the source of the material.You may not, except with our express written permission, distribute or commercially exploit the content. Nor may you transmit it or store it in any other website or other form of electronic retrieval system.

Privacy Policy XML-Sitemap