Create main site background Images

We get a lot of questions that are something like: “what size background image should I use?”, or “how do I make sure my background image fills the screen just right?”. This tutorial aims to answer those types of questions.

What size background image should I use?

As far as the pixel dimensions (width and height) of the background image, it doesn’t really matter. What really matters is file size (kilobytes). We highly recommend you keep your background image under 150kb (under 100 or 50kb is even better). Why? Because having a really large (in terms of file size) image will really slow down your blog’s loading time for visitors.  We’ve seen a few users who unwittingly uploaded images over a megabyte — which is probably too large.

If you’re not sure what your image’s file size is, you can upload it in your ProPhoto blog admin area and ProPhoto will tell you what the file size is.  Or, you can inspect the file using your computer’s operating system.

wp38_background stats

How do I make it fit the browser window exactly?

A lot of people ask us what size image it would take to “exactly” fit their blog’s background, or fill the background area completely with one image. The answer to that is… there is no answer.

You can’t exactly fit your background image to the blog’s entire background area because everyone’s screen size and browser window size is different. So, you could get it to look just right on your computer, but chances are that 90% of the rest of your blog visitors would see it differently.

If I can’t make it fit exactly, what can I do?

Excellent question. There are a couple common ways to handle using your background image, that can result in some pretty great looks. They are: a) use a “tiling” image to fill the background like wallpaper, b) create a centered bg image that can be seen on either side of your blog, or c) horizontally tile a bg image. We’ll explain all three options below:

Option 1: a tiling, wallpaper style background

The most common, and easiest thing to do is to use a small graphic that tiles seamlessly like wallpaper to fill your background, like Michael D’avello did:

This image…

…set to tile fills the background area like this.

To do this, be sure you have your background set to “tile” in the ProPhoto customization area:

wp38_background tile

A few tips:

If you’re taking this approach, be sure to set the background color for your blog to a very similar color as the predominant color in the background image. We say this because, when your blog is loading for the first time, the background color will show for about a second until the user downloads the background image into their cache. So, if you have a yellowish background tiling image, you would not want the background to be black for a second, then switch to looking yellow. Instead. You’d want it to show up a solid yellow, close to the color of your background image, for the split second before the image was actually loaded and displayed.

If you’re looking for some good, free, background patterns, try http://squidfingers.com/patterns/ and http://bgpatterns.com.

Finally, if you have an image that you really want to use as a tiling background, but it wasn’t created to tile and shows “seams” when it tiles, search online for a tutorial on turning an image into a seamless pattern – there are several great approaches.

Option 2: a centered background image

Another thing you could do is create a larger image that you set to be centered in your blog’s background. The result of this approach is a background image that peeks out on the left and right side of your blog. The included “Elegant” starter design template in ProPhoto takes this approach:

This background image centered…

…ends up peeking out from both sides

To get that effect, you’d have to set the image to be centered and not tile, like so:

wp38_ background no tile

If you look closely at the background image (the top one of the three images above) you’ll see that it intentionally fades to a solid color at the bottom.  That’s so that it can blend seamlessly with a solid background color underneath the image, below where the image can be seen.

A variation…

A variation of this idea, is to create a background image and set the “background image tiling” to “tile only vertically”, to create a repeating pattern that continues down the sides of the blog.  That’s how Mike Villa created this look:

Option 3: A horizontally tiling background image

One other thing you could do is create an image that tiles only horizontally:

wp38_bkg tile horiz

Like we did with the included starter design template called “Brown.” What happens is:

This image…

…tiled horizontally only fills the background like this.

Conclusion:

Hopefully, this gives you some ideas about how to size and use a background image with your ProPhoto blog.  There are lots of other clever and creative things you can do with a well-designed background image and just the built-in options of ProPhoto, but this should be enough to get you thinking in the right way about it.

Disclaimer: if you’re trying to create some sort of fading, or tiling, or complex background image to match your creative vision, but are having a hard time technically pulling it off in Photoshop, don’t contact us! We’re terrible at Photoshop and don’t provide support or tutorials for that product.  Sorry! You’ll have to search for Photoshop tips online, or find a friend or some other website to help you.  We hired a professional designer to create the background images we use in the starter design templates.


We get a lot of questions that are something like: “what size background image should I use?”, or “how do I make sure my background image fills the screen just right?”. This tutorial aims to answer those types of questions.

What size background image should I use?

As far as the pixel dimensions (width and height) of the background image, it doesn’t really matter. What really matters is file size (kilobytes). We highly recommend you keep your background image under 150kb (under 100 or 50kb is even better). Why? Because having a really large (in terms of file size) image will really slow down your blog’s loading time for visitors.  We’ve seen a few users who unwittingly uploaded images over a megabyte — which is probably too large.

If you’re not sure what your image’s file size is, you can upload it in your ProPhoto blog admin area and ProPhoto will tell you what the file size is.  Or, you can inspect the file using your computer’s operating system.

How do I make it fit the browser window exactly?

A lot of people ask us what size image it would take to “exactly” fit their blog’s background, or fill the background area completely with one image. The answer to that is… there is no answer.

You can’t exactly fit your background image to the blog’s entire background area because everyone’s screen size and browser window size is different. So, you could get it to look just right on your computer, but chances are that 90% of the rest of your blog visitors would see it differently.

If I can’t make it fit exactly, what can I do?

Excellent question. There are a couple common ways to handle using your background image, that can result in some pretty great looks. They are: a) use a “tiling” image to fill the background like wallpaper, b) create a centered bg image that can be seen on either side of your blog, or c) horizontally tile a bg image. We’ll explain all three options below:

Option 1: a tiling, wallpaper style background

The most common, and easiest thing to do is to use a small graphic that tiles seamlessly like wallpaper to fill your background, like Michael D’avello did:

This image…

…set to tile fills the background area like this.

To do this, be sure you have your background set to “tile” in the ProPhoto customization area:

A few tips:

If you’re taking this approach, be sure to set the background color for your blog to a very similar color as the predominant color in the background image. We say this because, when your blog is loading for the first time, the background color will show for about a second until the user downloads the background image into their cache. So, if you have a yellowish background tiling image, you would not want the background to be black for a second, then switch to looking yellow. Instead. You’d want it to show up a solid yellow, close to the color of your background image, for the split second before the image was actually loaded and displayed.

If you’re looking for some good, free, background patterns, try http://squidfingers.com/patterns/ and http://bgpatterns.com.

Finally, if you have an image that you really want to use as a tiling background, but it wasn’t created to tile and shows “seams” when it tiles, search online for a tutorial on turning an image into a seamless pattern – there are several great approaches.

Option 2: a centered background image

Another thing you could do is create a larger image that you set to be centered in your blog’s background. The result of this approach is a background image that peeks out on the left and right side of your blog. The included “Elegant” starter design template in ProPhoto takes this approach:

This background image centered…

…ends up peeking out from both sides

To get that effect, you’d have to set the image to be centered and not tile, like so:

If you look closely at the background image (the top one of the three images above) you’ll see that it intentionally fades to a solid color at the bottom.  That’s so that it can blend seamlessly with a solid background color underneath the image, below where the image can be seen.

A variation…

A variation of this idea, is to create a background image and set the “background image tiling” to “tile only vertically”, to create a repeating pattern that continues down the sides of the blog.  That’s how Mike Villa created this look:

Option 3: A horizontally tiling background image

One other thing you could do is create an image that tiles only horizontally:

Like we did with the included starter design template called “Brown.” What happens is:

This image…

…tiled horizontally only fills the background like this.

Conclusion:

Hopefully, this gives you some ideas about how to size and use a background image with your ProPhoto blog.  There are lots of other clever and creative things you can do with a well-designed background image and just the built-in options of ProPhoto, but this should be enough to get you thinking in the right way about it.

Disclaimer: if you’re trying to create some sort of fading, or tiling, or complex background image to match your creative vision, but are having a hard time technically pulling it off in Photoshop, don’t contact us! We’re terrible at Photoshop and don’t provide support or tutorials for that product.  Sorry! You’ll have to search for Photoshop tips online, or find a friend or some other website to help you.  We hired a professional designer to create the background images we use in the starter design templates.

We get a lot of questions that are something like: “what size background image should I use?”, or “how do I make sure my background image fills the screen just right?”. This tutorial aims to answer those types of questions.

What size background image should I use?

As far as the pixel dimensions (width and height) of the background image, it doesn’t really matter. What really matters is file size (kilobytes). We highly recommend you keep your background image under 150kb (under 100 or 50kb is even better). Why? Because having a really large (in terms of file size) image will really slow down your blog’s loading time for visitors.  We’ve seen a few users who unwittingly uploaded images over a megabyte — which is probably too large.

If you’re not sure what your image’s file size is, you can upload it in your ProPhoto blog admin area and ProPhoto will tell you what the file size is.  Or, you can inspect the file using your computer’s operating system.

How do I make it fit the browser window exactly?

A lot of people ask us what size image it would take to “exactly” fit their blog’s background, or fill the background area completely with one image. The answer to that is… there is no answer.

You can’t exactly fit your background image to the blog’s entire background area because everyone’s screen size and browser window size is different. So, you could get it to look just right on your computer, but chances are that 90% of the rest of your blog visitors would see it differently.

If I can’t make it fit exactly, what can I do?

Excellent question. There are a couple common ways to handle using your background image, that can result in some pretty great looks. They are: a) use a “tiling” image to fill the background like wallpaper, b) create a centered bg image that can be seen on either side of your blog, or c) horizontally tile a bg image. We’ll explain all three options below:

Option 1: a tiling, wallpaper style background

The most common, and easiest thing to do is to use a small graphic that tiles seamlessly like wallpaper to fill your background, like Michael D’avello did:

This image…

…set to tile fills the background area like this.

To do this, be sure you have your background set to “tile” in the ProPhoto customization area:

A few tips:

If you’re taking this approach, be sure to set the background color for your blog to a very similar color as the predominant color in the background image. We say this because, when your blog is loading for the first time, the background color will show for about a second until the user downloads the background image into their cache. So, if you have a yellowish background tiling image, you would not want the background to be black for a second, then switch to looking yellow. Instead. You’d want it to show up a solid yellow, close to the color of your background image, for the split second before the image was actually loaded and displayed.

If you’re looking for some good, free, background patterns, try http://squidfingers.com/patterns/ and http://bgpatterns.com.

Finally, if you have an image that you really want to use as a tiling background, but it wasn’t meant to tile, and thus shows “seams” when it tiles, check out this tutorial on turning an image into a seamless pattern in Photoshop.

Option 2: a centered background image

Another thing you could do is create a larger image that you set to be centered in your blog’s background. The result of this approach is a background image that peeks out on the left and right side of your blog. The default “Elegant” starter design template in ProPhoto takes this approach:

This background image centered…

…ends up peeking out from both sides

To get that effect, you’d have to set the image to be centered and not tile, like so:

If you look closely at the background image (the top one of the three images above) you’ll see that it intentionally fades to a solid color at the bottom.  That’s so that it can blend seamlessly with a solid background color underneath the image, below where the image can be seen.

A variation…

A variation of this idea, is to create a background image and set the “background image tiling” to “tile only vertically”, to create a repeating pattern that continues down the sides of the blog.  That’s how Mike Villa created this look:

Option 3: A horizontally tiling background image

One other thing you could do is create an image that tiles only horizontally:

Like we did with the default stater design template called “Brown.” What happens is:

This image…

…tiled horizontally only fills the background like this.

Conclusion:

Hopefully, this gives you some ideas about how to size and use a background image with your ProPhoto blog.  There are lots of other clever and creative things you can do with a well-designed background image and just the built-in options of ProPhoto, but this should be enough to get you thinking in the right way about it.

Disclaimer: if you’re trying to create some sort of fading, or tiling, or complex background image to match your creative vision, but are having a hard time technically pulling it off in Photoshop, don’t contact us! We’re terrible at Photoshop and don’t provide support or tutorials for that product.  Sorry! You’ll have to search for Photoshop tips online, or find a friend or some other website to help you.  We hired a professional designer to create the background images we use in the starter design templates.

Did you find this tutorial helpful? Thanks for helping us support our customers better! Yes No saving...

If you’ve searched the tutorials and can’t find what you need, please contact us. We’re here to help. Contact Us