However photo-editing software can be quite pricey… unless you know where to look! The internet has made free photo-editing software only a click away, though not all photo-editing software was created equal. Here are five of the best free photo-editing software programs out there:

1. FlauntR

When you go to the FlauntR website you are given several different editing options to choose from, depending on what it is you want to accomplish. They are: PicasR,StylR, TextR, ProfilR, and EditR. Because each option has its own unique functions there are endless arrays of things you can do to spruce up your pictures.

Flauntr Workspace with Amazing One Touch Effects

2. Picnik (going to Google+)

Arguably one of the most popular free photo-editing websites out there, Picnik is fun, easy to use software that lets you liven up your photos with the traditional basic edits like cropping and resizing, and also with fun edits like adding in googly eyes or changing the color schemes. For a small fee you can also upgrade to the Premium version of Picnik, which gives you an even wider range of editing features

Picnik has a wide array of editing tools available

3. Pixlr

There are three different sections in the Pixlr software for editing, Pixlr Editor, Pixlr Express, and Pixlr-o-matci, all of which allow you to do different manipulations to your photos. The software really does give you the best of all worlds in terms of software editing because it allows you to use an online version, a desktop version, or a cell phone app.

Pixlr has an all too familiar interface we re familiar with

4. Splashup

Like some of the other software programs, Splashup gives you multiple options in terms of editing programs. There is the full version of Splashup that allows traditional advanced editing features and then there is the Splashup Light version that lets you quickly do some basic edits to photos.

Splashup interface showing desktop-like controls

5. Fotoflexer

Another easy-to-use software option is FotoFlexer, which allows easy editing tricks for people with little-to-no editing knowledge. The site is similar to software like Picnik and Pixlr, making it perfect for people who are interested in touching up photos or adding in fun, quirky edits.

Fotoflexer is simple, but fast and easy photo editing

Conclusion:

Taking the time to edit photos is an easy way to escalate the professionalism of your blog or website, and with so many free options that offer quality editing to choose from there’s really no excuse not to touch up pictures before posting them.

This is a guest post from Laura Backes. Laura enjoys writing about all kinds of subjects and topics related to internet service providers in the area. You can reach her at: laurabackes8 [at] gmail.com.

Every creative and tech professional should not only strive to be up on the latest technological trends, but also should also look like a modern and creative professional. Try out these four apps to take your everyday style from tech geek to creative genius in no time.

1. Snapette

The best thing about Snapette is that it is designed for browsing, or “window shopping,” on your phone. Users take and upload pictures of fashion items they see, and then they tag them on the site. They include the product information, price and where the item can be found.

Screenshot of the Snapette App

Then they share the info with fashion lovers across the globe. You can do searches for particular products or simply browse through the photos and click on items that catch your eye. Try it free here.

2. Style.com

The app version of the Style.com site is a great way to use the latest technology to stay abreast of trends. Whether you want to check out editorials, red carpet shots or runway images, this app has it all.

Style.com's mobile app

The site also covers parties and has a video section with interviews and other behind the scenes footage. Get it free at Style.com.

3. Sephora To-Go

Sephora’s store app is awesome to check out on your own or use while shopping at a Sephora location. You can browse the newest products online, buy them directly from your phone, stay up to date about sales and offers, create a Sephora Beauty Insider account, and check out product reviews by customers.

Sephora's awesome mobile app

When you’re in the store, you can also scan items using the app and gain instant access to product info, reviews and product videos. Try it free here.

4. Beautylish

Beautylish is a makeup and hair app that is the place to go to put the finishing touches on any look. This app was designed for the iPad and has a really cool magazine-style layout, with images blocked together that can be clicked on for tutorials and further views.

Screenshot of the Beautylish website

Users can browse through the latest makeup trends, product reviews, and tutorials. Get it free here.

This is a guest post by Jane Smith from background check. She is a Houston based freelance writer and blogger. Questions and comments can be sent to: janesmth161[at]gmail.com

Here are seven ways to help you get your homepage off the ground and looking great:

1. Quality Content

Spice up your homepage up by featuring quality articles, product reviews or pictures. This has the two fold effect of keeping your loyal users engaged as well as attracting new users to your site. This will also improve your SEO by making search engines like Google happy.

InkEfx's homepage displays an array of high quality content such as products, photography and graphic design elements

2. Be Creative

Always experiment with new ways of engaging people with your homepage. Try music or animation, or even a short video. Never be bland or generic, new websites need to make a big splash on the crowded online marketplace.

Pro Blog Design is a perfect example of a creative homepage

3. Keep Your Links Focused

Your homepage will need several links in order for people to be able to navigate your site. However, make sure the links you include are relevant to your website. Keep the links focused and easy to understand. A link titled ‘About’ is easy to understand because it’s clean and simple. A link containing more than seven words is too loaded and unfocused.

Popularise demonstrates good focused links in their homepage

4. Keep it Clean

The best way to create a great looking homepage is to avoid clutter. Big websites, like Amazon, have a massive client base. People will keep going to the site no matter how busy the homepage is. You don’t have that luxury. Keep the homepage clean and simple for now.

Harvest is prime example of clean and clutter-free web design

5. Limit the Scrollbars

It might be tempting to stuff your homepage full of information so people have everything at their fingertips. However, it can be pretty off putting for people when they are faced with a dozen scrollbars full of content. It can be so daunting that they quickly lose interest and leave your site, so save the content for the inner pages.

Rhythm Church kept the homepage short so no scrollbars appear on the right

6. Keep it Up to Date

Don’t let your homepage lag behind the times. Make sure your homepage receives regular updates to keep people interested. Of all pages that need to be refreshed periodically, your homepage takes precedent because it’s the first thing people will see.

Toronto Suns homepage is filled with breaking new content

7. Make the Homepage Relevant

You want your website, and especially your homepage, to aesthetically match what you’re trying to sell. If you have a site that features classical music, make sure your homepage isn’t covered with barbed wire graphics. Make sure you register with a robust web hosting service, as they usually provide you with the tools to easily customize your site.

Compass sells software for web design - so their homepage has to look awesome

Your homepage is the first thing that people see when they click on your site, and with these seven tips you can make a great looking homepage that is sure to gain a lot of traffic.

Please note that you will need to know some HTML / CSS and a little Javascript scripting to follow. Ready to get started? Let’s begin:

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#tabs {
	border:1px solid #ccc; 
	height:28px; 
	background:#eff5f9; 
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}
#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right:5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
	font-weight:bold; 
	color:#000000; 
	padding:7px 14px 6px 12px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

1
2
3
4
5
6
7

.container{ 
	clear:both; 	 	 
	padding:10px 0px; 
	width:664px; 
	background-color:#fff; 
	text-align:left; 	 
}

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

1
2
3
4
5
6

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {	
    //our script goes here...
});
</script>

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

1
2

$('#tabs li a:not(:first)').addClass('inactive');
$('.container:not(:first)').hide();

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

1
2
3
4
5
6
7
8

$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');		
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1″. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.

Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

1
2
3
4
5
6

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');		 
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');	
}

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

We take a look at where to start in building your freelance writing portfolio and making sure your bank balance doesn’t suffer as a result of your career move…

Set Up Shop

Make sure you have a well-polished, up-to-date portfolio to tout around to potential clients. Setting up a website is a great way to accomplish this. Your CV, examples of your work, a contact form and – if possible – testimonials from people you’ve worked with in the past should all be incorporated into the website. You can then link to the site from any social networking and professional networking profiles you have online – and pop a link in your email footer too.

It is at this point that you may also choose to register as self-employed with HM Revenue and Customs, you can find out more about doing that here.

Use Previous Contacts

If you’re considering working as a freelance writer, the chances are that you’ve already honed your craft in a permanent position or two. Going back to previous employers or colleagues and letting them know that you’re available for short-term projects is a real no-brainer.

Even if they’re not looking for anyone at the point you get in touch, they could be further down the line or perhaps know someone else who could do with your services.

Similarly, ensure you’re connected with previous colleagues and employers on LinkedIn, that way you’ll be able to connect directly with people they know. LinkedIn also has various groups associated with freelancing, which can offer a great way to network.

Search for Work

There are a number of freelance writer job hubs online that pair writers looking for work with those looking for writers. Registering with an agency is another way to get an ‘in’ at companies looking for freelancers.

You may also choose to look on classified sites, such as Gumtree and Craigslist, where you’ll find ads for specific freelance writing jobs. This can sometimes feel a little less above board, so make sure you get legitimate contact details and credentials for any clients you take on.

Showcase your Talent

Setting up a professional website outlining your experience as a freelance writer is a great way to demonstrate what you can do. However, another way is to create a blog that is specific to your area of expertise, along with an accompanying Twitter profile.

Creating live, fresh content that reacts to current events will impress potential clients. It will also allow them to get more of an idea about what you’re interested in, what you know about and what your standard style is; they could end up working fairly closely with you, so it’s good to give a fair impression of what you’re like as a person on there too.

Get Out and About

There is a whole host of different freelancer events held regularly throughout the country, such as the ones run by The Freelance Writers Den. These can be a great way to learn more about the market, hone your skills and get to know fellow freelancers.

You may question the logic in getting to know the competition but this can be a great strategy when looking for work. Established writers can often find themselves having to turn work down due to a lack of availability. Ensuring you’re front of mind with them could result in being put forward for the jobs they can’t take – just make sure you return the favour whenever you get the chance!

Take Precautions

Operating as a freelancer does leave you vulnerable to delayed payments and – in the worst cases – not being paid for the work you’ve done. Remember to get an agreement for any charges involved before undertaking work and keep email records of what you’ve agreed to do at every stage.

Then once you have been paid, make sure you set enough money aside to pay the tax bill you’ll end up with once the financial year draws to a close. Though freelancers do tend to pay less income tax than those who are permanently employed, it’s a good idea to pop 25% of whatever you earn into a separate bank account. This should prevent you from spending it by accident and help you to avoid any nasty surprises…

Julie writes on behalf of Clickinks. Julie works in design and marketing. In her spare time she likes to learn how to code and plays the piano.

That said, below are 3 advertisement types that every designer should avoid. Note that these ads are especially notorious in turning off readers, plus making the overall feel of the site look horrendously “amateurish.”

1. Fake Link Ads

When laying out articles and other content, you may be tempted to disguise ads as legitimate links. Links in form of valid information within the article. While this “trick” also known as blending advertisement may fool a few readers – can result in small sales; in reality, your consumers will pick up rather quickly.

In time, they will stop clicking on them altogether. Even worse — they can quit visiting your site as a result. No trickery should be involved when it comes to advertisements. So Fake link ads is definitely No-No #1.

2. Pop Ups

Pop-up ads are one of the most hated advertising techniques by far. This is because not only do they catch consumers off guard – but rather, it is forced upon them. They’re really somewhat comparable to a horse pill that consumers are made to swallow. Almost immediately – consumers look for the “x” button to click out of it.

If, for some strange reason – you are adamant about including a pop-up ad – it should be for these two purposes only: a) the pop up should be a form that allows your readers to subscribe to your blog; and b) the pop up ad should highlight a product that you are selling (not an ad for another company).

You should also consider using “lightbox” or “modal boxes” as an alternative. This is so that no new browser window is opened. Regardless, you want to make sure that you do this as little of this as possible. Needless to say, pop up ads is a No-No to be taken seriously.

3. Flash Ads

As a general rule, most webmasters know to refrain from using Flash because they slow down a site’s loading time. Ads that use flash are no different. They’re quite intrusive, not to mention – still requires a plugin to run. Think of the users you cannot reach (iPads and iPhones). In addition, more consumers are choosing to block flash ads by using plug-ins that prevents ads from ever loading. Thus, it’s best to avoid using Flash ads altogether. Flash Ads is a No-No for sure.

Conclusion

While the types of ads mentioned above should be avoided, it doesn’t mean that no advertisement should be included on your site. There are appropriate ad types and placement techniques that not only generate income – but compliment your site at the same time. Always get in the mindset of your consumers. Think about what ads bug you vs the ones you will actually click on. Surf your site as if you’re the average Joe – then take appropriate action from there.

Jacelyn Thomas writes about identity theft for IdentityTheft.net. If you should have any questions for Jacelyn, she can be reached at: jacelyn.thomas[at]gmail.com.

For some reason – the images are not picking up prettyphoto. So I modified a few lines to fix this. I also had to completely rewrite the slideshow code. The theme is using WordPress’ default jQuery library and it didn’t play nice with jQuery UI (which the slideshow was using). This time around – the slideshow is not dependent on any plugin. For those who’ve bought this theme before – download the theme again. Contact me if you don’t have the link anymore. For those interested – you can buy the theme from this link.

Other updates include the addition of @fontface for the post titles – so the it now uses both Cufon and web fonts. Check out the Demo from here.

The Homepage

Squid Work’s homepage sports a beautiful slider of your latest posts. Code credits go to Nivo Slider for the awesome transition effects of the images. Right below the slider are 6 additional thumbnails of your selected posts.

How to select a category for the slider and posts underneath it:

You can specify a post category for the slider as well as the 6 thumbnails right below it. All you need to do is open feature.php in the editor section in the admin panel (go to “Appearance” -> “editor”, and select “feature.php” in the right hand column). Once you have “feature.php” in editor – look for this code: “$cat_for_slideshow = ”” enter the category slug inside the quotes. Do the same for the posts underneath – but look for “$cat_for_six_boxes = ”” instead.

The Sidebar

Squid Work’s sidebar floats in the middle of the viewport – thanks to the jQuery plugin: stickyFloat. Note that if your sidebar is longer than the viewport – it won’t float as expected. I added a custom flickr photo feed – thanks to code by Barattalo. This feed can be configured by adding your own flickr group id inside functions.php. Lastly, the sidebar supports widgets. Widgets will show up right above the Flickr feed.

Everything Else

Notice the beautiful bokeh photography by gemedj89 of Photodune. The container of the site is a combination of CSS 3 and textured repeating patterns. Fonts are supplied by Google Web Fonts and finally – all code is XHTML valid. How about that!

So what are you waiting for! Grab Squid Work and use for your WordPress blog. Make sure you follow me in twitter or facebook. Enjoy!

Outdated SEO Tactics

1) Link Exchanges

Link exchanges were an old favorite that used to work extremely well. You’d put a link on your site pointing to the site you are exchanging with and in turn they would put a link on their site pointing back to you. Google got wise to this – it doesn’t work anymore – at all. Some people even try and do three-way and four-way link exchanges, but Google can recognize this strategy and doesn’t look kindly on it.

2) Search Engine Submission

Google has an option to submit your site to get it indexed, but it’s not necessary. If you are engaged in an internet marketing campaign then you don’t need to do this. A few quality links and your entire site should be indexed in less than a few weeks. If your site isn’t getting indexed and garnering some decent links, you have a much bigger problem at hand.

3) Meta Keywords

Meta Keywords used to clue in search engines to the content of your site. At one point search engines valued the meta keywords tag, but they don’t even look at it anymore because it was spammed on such a regular basis. It is a waste of your time and a sure fire way to give away your keyword strategy to your competitors.

4) Alt Tag Stuffing

The alt tag is intended to provide text descriptions to image, audio and video content, and using alt tag attributes is awesome! It literally allows the hearing and visually impaired to understand your website. But use this tag tastefully, don’t try and stuff in a bunch of unnecessary keywords into these attributes in an effort to appear more topically relevant to the keywords you are targeting.

5) Title Attribute in links

When you write a link in html you can use a title attribute to stick some keywords into the code of link. This used to be a decent way to tell search engines what the link was about, but it is no longer believed to hold any value because it was abused.

6) Keyword Stuffing

If you want to rank well for a keyword, you need to have that keyword in plain text on the page. Search engines latch on to text content because it is easiest for them to process and interpret. However, using the same keyword over and over again in an effort to feign topical relevancy can get you penalized. Don’t try and jam pack every relevant key phrase into your on page text over and over again – it looks horrible to human users and it looks fishy to search engines. Instead you should go for natural writing in your on page text that just so happens to utilize variations of your keywords in a frequent but tasteful manner.

7) Hidden Text

If you think you can get away with keyword stuffing by adding your keywords on page and hiding them by making the text the same color as the background – you are sorely mistaken.

8) Online Press Release

Doing a press release is by no means bad, it can help raise awareness of your company and get you some attention. However, doing press releases just for the links is not a good use of your budget. The links that come from press release sites have extremely limited value because these sites do nothing but post links all day long. A website only has so much link power to give out, and when all it does is link out to hundreds of different sites on a daily basis it isn’t going to have a whole lot of link juice left for you. Don’t get me wrong, the links in press releases still provide value, but they are not the best bang for your buck.

Post Panda

The Panda update shook up the SEO world. The emphasis of SEO changed from creating links to providing value – it was a major shift for the entire industry. With this update a host of tactics became instantly outdated, here are the top 3:

1) Blog Commenting (only for the sake of a link)

Most blogs allow you to comment, and some blogs will even throw you a link for commenting on their site. This used to be a solid way to build links only a year ago – but it got abused. Blogs published very thin content filled with AdSense and people would comment on very poorly written articles all day long. After the Google Panda update sites publishing thin content took a huge hit, and so did the value of the links they were giving out. Blog commenting in and of itself isn’t bad, it helps you build your digital voice and your site gets links from new domains, but these links (on their own) wont do a lot for you when it comes to ranking.

2) Article Marketing Directories

Article marketing directories (ezinearticles, articlebase.com etc…) used to be agreat way to get anchor text links that resulted in strong rankings. These sites published hundreds of articles a day and they allowed you to stick a few links into a bio section under your article. However, most of the content on these sites were pretty flimsy and Google’s Panda decimated these content farms. It was easy, simple, quick and powerful – Google hated it. Panda laid waste to article marketing directories – steer clear of them unless you enjoy wasting your time and not seeing results.

3) Publishing Thin Content

I get it, writing content that is engaging and interesting is hard. Especially if you are trying to rank for a term like “Plus size sun dress”, I mean, how do you even begin to make that interesting? Unfortunately, if you want to rank well, you need to have good content. Just writing a few lines of text about every product or service your site is selling and trying to have those pages rank well is a recipe for disaster. Panda went after thin content and product pages for online stores are thin by nature. If you really want to have your product or category pages ranking well you need robust content that is going to earn your site powerful links.

Conclusion

As you can see, most of these practices are still widely used to this day. One must take note of the newer techniques that will get your website indexed and ranked properly. If you are trying to pull one over on the search engines (hidden text) or take link building shortcuts (low quality blog commenting), it’s not going to go well for you. With strong SEO comes a lot of hard work, and most of the tactics listed here were of questionable value to begin with. If you want to rank well, you need to put in the effort and earn it.

John-Henry Scherck is an Organic Web Strategist with Digital Third Coast, a Chicago internet marketing company located in the Wicker Park/Bucktown Neighborhood. He is passionate about link building, long term SEO and local search. When he isn’t ruining his eyes going over inbound link profiles in excel, he spends his time running, cooking and hanging with his two awesome cats, Carter and Wilson.

This tutorial will walk you through how to create full page background images that rotate like a slideshow. We will be using CSS and jQuery – particularly the nifty cycle plugin. Ready to get started? Let’s begin:

The HTML Markup:

First we create the background images. Place them in your root folder, in a directory called “images”. We wrap them around a special DIV which houses all the images. We need this DIV so we can target it from our script later:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="slideshow">
<img src="/images/b1.jpg" class="bgM"/>
<img src="/images/b2.jpg" class="bgM"/>
<img src="/images/b3.jpg" class="bgM"/>
<img src="/images/b4.jpg" class="bgM"/>
<img src="/images/b5.jpg" class="bgM"/>
<img src="/images/b6.jpg" class="bgM"/>
<img src="/images/b7.jpg" class="bgM"/>
</div>
<div id="wrap">
...your content here
</div>

Make sure your image is a good sized horizontal shot. For almost all screen resolutions have wider width vs height. Our images will scale to the width of the screen. The DIV id=”wrap” is the container for your content. This is directly underneath our slideshow container. Save your HTML and view it in the browser. You should see a series of images on top of each other.

The CSS

Add this code to your page. This will set the images width to span the entire page.

1
2
3
4
5
6
7
8
9
10

#slideshow, img.bgM {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

View Refresh your page. You should see only the first image. The rest of the images are tucked away underneath the first one. This is what “z-index” and “position” properties in our code did. Now for the slideshow effect, we use some jQuery magic.

The jQuery

Download the jQuery Cycle plugin from here, and place it inside a directory called “scripts” in your root folder. Add the jQuery library and a reference to the plugin inside the head section of your HTML:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>

Then add this code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
				$('#slideshow').cycle({
				fx: 'fade',
				pager: '#smallnav', 
				pause:   1, 
				speed: 1800,
				timeout:  3500 
			});			
		});

You can choose to edit the plugin options by tweaking the above code. For the list of available options such as transition effects, timing and callbacks – refer to the jQuery Cycle docs.

Conclusion:

Now refresh your browser and you should see your background fade into the next image and to another. Like I said, this style can be quite refreshing – to vary your page from a million other websites out there with large image backgrounds. The only problem with this is when browser is resized, the image stays in the original size and doesn’t resize on the fly. Maybe one of you guys can improve the image handling with javascript or something.

Bonus Tip: for added functionality, you can add individual links to the background images by wrapping each image into an anchor tag:

1
2
3
4

<div id="slideshow">
<a href="http://yahoo.com"><img src="images/b1.jpg" </a>
<img src="images/b3.jpg" class="bgM"/>
class="bgM"/></a>

This is especially useful if you’re using your background as advertising space of some sort (hint hint).

So go on and try it out for yourself. Please leave me a comment below if you have suggestions on how to improve the code, show off your stuff, or simply say hello.