A beautiful blog design is what bloggers will want to have in their blog. When choosing a blog design, a template which used lots of graphic or images will result in slow loading. So how do we choose or make beautiful design with less graphics and retain the ‘beauty status’ at the same time? We can do it  with little CSS coding and the graphic (image) we create and use.

For example, if you head over to http://sushiandrobots.com you will see the background image wide and huge. But actually it is only a small image size of 108×108.

Background Image

Let’s take a look at this CSS code below. The is the CSS background (repeat) Property. The background-repeat property sets if/how a background image will be repeated.

The background-repeat property is supported in all major browsers.

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.

The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

By default, a background-image is repeated both vertically and horizontally.

Property Values

Example usage:
background-image: url(images/winchester-walls-2.jpg);
background-repeat: x;
or
background-repeat: y;

The NAVIGATION MENU BAR

Navigatio Bar

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better.

Let’s start off with a usability tip that applies to any navigation bar. When a user visits a new website, one of their primary points of focus will be the navigation bar. If that element has been well designed, the user will look to it first for help with their task. Almost every website has certain sections that are “expected” by users, such as “About us,” “Services,” “Products,” and “Contact us.”

There are variety of techniques and best practices to improve the usability of horizontal navigation bars. Here is one http://www.husdal.com . The navigation menu at husdal.com does not use any image, it is simply css code that does the magic here.
Example Usage:
background-color: #DDDDDD;
border: 1px dashed #EBEBEB;

The Header Banner

The header is likely the first thing a new visitor sees on a blog, so it is the first impression — but why is a blog header so much more important, or at least different, than the header of a basic website?

Your blog’s header banner give the first impression, “I’m different from the others”. A blog header Header Banner tells the audience what your blog is and it reflect on everything else in your blog page. Therefore having a great header banner is very important.

In header too, there are varieties of style and functions and it varies from blog to blog depending on the design layout. Here is an example- http://www.travisjmorgan.com/blog/. In this blog the header banner sits like a beautiful queen and her beauties are reflected on all sides which make the blog a good looking one.

Subscribe to our blog tips to help you build a better blog.
Successful blogging starts with a Pro Blog Set up, Pro Blog Design and Pro Blog Optimization. To become a Pro Blogger check out ourplans. Blogcastor will love to help you build a better blog. Join Blogcastor Blog Academy to shape a better you online in no time! We provide our customers with premium blogging lessons, unique ideas, exceptional techniques and strategies as well as top-notch blog management services that will help you to build a fantastic blog and achieve your online goals.