bavotasan.com » Background

Full Size Background Image jQuery Plugin: Redux

c.bavota — Mon, 07 Feb 2011 14:32:33 +0000

I just made a few changed to this plugin because it was acting a little weird. Tested it in Safari, Chrome and Firefox and it work perfectly now. All you need is an image that you want to have displayed as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.

First comes the plugin code:

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);		
 
    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();
 
      var winwidth = $(window).width();
      var winheight = $(window).height();
 
      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;
 
      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });		
      }
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 
  };
})(jQuery)

There is only a little CSS needed for this one:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
 
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  
div>

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
script>

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

How to Set a Default Custom Background in WordPress 3.0

c.bavota — Tue, 30 Nov 2010 16:44:36 +0000

If you’re a theme developer and you want to allow users to set a custom background image or color, activating the feature in WordPress 3.0 is as simple as including one line of code in your functions.php file. If you want to have a default background image or color, it takes a bit more fiddling around to figure out exactly how to make it work.

I was able to get it working in a couple of my themes so I thought I would share my findings.

Setting up your theme just to use the custom background editor requires this in your functions.php:

if(function_exists('add_custom_background')) {
	add_custom_background('set_theme_background');
}

I like to use the if statement just in case people will be using your theme in an older version of WordPress. Without the if statement, the theme will break. Always think about backwards compatibility if that is important to your theme or to you.

Now, to set a default background, it takes a few more steps. Take a look at the code below:

if(function_exists('add_custom_background')) {
	add_custom_background('set_theme_background');
 
	function set_theme_background() {
		$bgimage = get_background_image();
		$bgcolor = get_background_color();
 
		echo "";
	}
}

This seems a bit sloppy but there are no real functions to gather some of this information so I had to string a lot of things together. What this script is doing, is gathering all the information that could be added by the custom background editor if your user is adding an image or a color. If neither is set, then you can set the default.

My default is an background image called bg.jpg that I have stored in my theme’s /images folder. You can also just set a color, or a large image with no reapeat. It’s totally up to you.

Magazine Basic v2.6 WordPress Theme

c.bavota — Tue, 08 Jun 2010 13:05:03 +0000

Since I have been doing all this talking about WordPress 3.0, I thought it only fitting to start incorporating some if its features into my themes. The first theme to get the upgrade is Magazine Basic. Version 2.6 also has the Arturo Theme Engine v2.0 installed to give a smoother experience while configuring the theme options. The new MB is currently available for download off of WordPress.org.

Here are a few of the new features:

WordPress 3.0 menu system
WordPress 3.0 background editor
Arturo Theme Engine v2.0
Ajax save function
Cleaner code

WordPress 3.0: Activating the Background Editor

c.bavota — Mon, 07 Jun 2010 21:31:39 +0000

Adding a color or image to your Web site’s background is not a very complicated thing to do if you are familiar with CSS. Luckily for those out there who know nothing about CSS, WordPress 3.0 introduces a simple admin user-interface that makes it extremely simple to select a color or image for your background. There are even controls for image position, repeating and attachment.

The new background editor in WordPress 3.0

Activating the background editor only requires that you add one line of code to your theme’s functions.php file.

if(function_exists('add_custom_background')) add_custom_background();

This will add the “Background” link to your Appearance panel in the wp-admin. Placing it inside the function_exists() function makes it backwards compatible in case someone uses your theme with WordPress 2.9.

8 Free Colorful Background Textures for Designers

c.bavota — Tue, 08 Sep 2009 17:16:49 +0000

Background textures are great when it comes to designing for the web. They can be used for site backgrounds, as overlays for images or whatever else your heart may desire. I decided to put together a colorful collection of 8 different textures in case anyone is in need.

If you don’t like the colors, you can easily change them with Photoshop by going to Image => Adjustments => Hue/Saturation.

Blue Diamonds

Brown Scuffed

Red Bubbles

Black Corroded

Green Circuits

Orange Mosaic

Purple Aged

Yellow Crumpled