Extendable backgrounds in HTML

The first of our HTML basics guides offers a simple method of creating websites with backgrounds that grow to fit any amount of content automatically. View our extendable background demo to see it in action. The demo also features a simple piece of javascript so you can easily see the background extend.

Stage 1: The image

Create a background for your website as you would normally. Our demonstration has a logo set in at the top as well as a graphic which needs to stay at the bottom of the page, and nice soft gradients and curves in between. Slice the image into 3 pieces: top, middle and bottom. The middle section should be no more than 1 or 2 pixels in height, this will be the part of the background that is repeated as much as required. Put the 3 images in your images folder.

Stage 2: The HTML

The code below is simplified for the purposes of this guide, our demo has extra divs for placing navigation, footers etc and we also used a partially transparent png for our content divs background to give a faded effect to the main background image.

<div id='site'>

<!-- The div for the top part of the background !-->

<div id='bg_top'>

</div>

<div id='main'>

<!-- Main site content goes here !-->

</div>

<!-- display bottom of background !-->

<div id='bg_bottom'>

</div>

<!-- Close site div !-->

</div>


Stage 3: The CSS

/* Puts the site in the middle of the page */
body{
text-align:center;
}

/* Ensures divs are shown same in all browsers */
div{
margin:0;
padding:0;
}

/* set middle background image as background, repeat vertically
* Make site appear in centre of page
* Z index ensures content in this div will show on top of other divs
**/
#site{
background-image:url(../images/bg_mid.jpg);
background-repeat:repeat-y;
text-align:left;
margin:auto;
width:800px;
z-index:3;
}

/** main content div, can be reposition to correct place on page **/
#main{
margin-top:-50px;
}

/** Display top part of background **/
#bg_top{
position:relative;
background-image:url(../images/bg_top.jpg);
background-repeat:no-repeat;
height:196px;
width:800px;
z-index:-1;
}

/** Display bottom part of background, top margin should be set to remove large space at bottom of page
* z-index is set so background does not cover up content
**/

#bg_bottom{
position:relative;
background-image:url(../images/bg_bottom.jpg);
background-repeat:no-repeat;
width:800px;
height:400px;
margin-top:-300px;
z-index:-1;
}

Conclusions

Blogger really isnt very good if you want to display html code in your blog! You need to convert the html entities (<, > and so on) first otherwise it just treats them as html. There are also all sorts of problems with sizing text, but enough about blogger! There are alternatives to the method described above, for example you could use a larger repeating image as the background and place your top logo and bottom graphic in separate divs over the top (using transparency in the images so that the background can be seen through them.

We will continue adding guides as and when we can, they will cover all aspects of web development from design to coding, databases to SEO and they will all be solutions to problems which we have discovered and used ourselves in our web work.

Some useful web development resources

As a professional website design/development agency we have found all of the following resources extremely useful:

1. The PHP manual - The majority of our programming work is in PHP, although we also use Java and ASP for certain projects, the online PHP manual is incredibly handy for looking up PHP functions, checking syntax etc.
2. DHTML Calendar - A fantastic little javascript calendar, free to use (although they have now developed a funky new version which isnt). Its very easy to add to any website, we have used it on various bookings websites and pretty much anywhere a user may be required to enter a date.
3. JonDesigns SmoothGallery - This is a great looking gallery which allows you to easily set up a slideshow with nice transition effects on any webpage. We normally combine it with our CMS to allow website owners to update their galleries.
4. Lightbox Gallery - This is an alternative gallery better suited to some projects than the smoothgallery above. There are lots of different lightbox scripts but all have similar functionality and we have found this one easy to implement in a range of websites.
   
5. InnovaStudio WYSIWYG - The best value WYSIWYG editor we have found. We combine it with our content management system to give website owners full content control over their websites.
   

A brief history of Search Engine Optimisation

Search Engine Optimisation (SEO) is a constantly changing field of website development. As google, msn (Bing), Yahoo and all the rest develop ever more complex algorithms for ranking websites so the SEO professionals (and amateurs) must adapt their techniques to keep their websites at the top. It used to be the case when the first search engines became commonplace that some well chosen meta tags - titles, keywords and descriptions - could see you ranking well and pulling in thousands of visitors. At around this time the first 'black-hat' search engine optimisers realised that if they stuffed their meta tags with 'Britney Spears' and 'porn' they could pull in all those sex obsessed teenagers, although quite what they expected to achieve with this is anyones guess.

Thus began the great SEO arms race, as the search engine coders improved and developed their algorithms to prevent these black hat optimisers from getting their sites unfairly high in the rankings. Techniques such as keyword stuffing, hidden text, and now backlink spamming gradually became obsolete and 'cheating' SEO became less and less attractive. Meanwhile proper search engine optimisation (White-hat) continued to work wonders for genuinely useful, interesting or individual websites. These started with the meta tags and moved on to checking that the website content contained good, relevant key phrases, to encouraging backlinks via links pages, writing and commenting on external blogs and forums and submitting sites to relevant 'proper' web directories.

Now, in 2010, the biggest factor in ensuring a website performs in search engines appears to be down to its appearance on social networking sites. This means sites like facebook, twitter, del.icio.us, squidoo, myspace and hundreds of others where normal internet users can post links and content are more important than any amount of keyword generators or directory submitters. Which means that finally the power is moving to the people rather than the specialists. Whether this is a good thing remains to be seen, after all just because something is popular it doesnt make it good (George W Bush anyone?).

However these latest changes don't mean the death of either ethical or non ethical search engine optimisation, the 'black-hatters' will happily create hundreds of fake accounts on all sorts of social networking sites, forums, blogs etc and spam them all with links in the hope that some will stick. Meanwhile the good guys will look around for related blogs/forums to make useful posts on which include a link back to their site and encourage others to link to their site by making it genuinely informative.