Using a custom image or color background

Print Friendly

Many of the Edublogs themes include options to:

  • Use a preset background image.
  • Upload your own custom background image.
  • Change your background color.

Changing your theme background means you can obtain a much more customized look and feel adding your “own personal touch” to your blog.

Using Preset Image backgrounds

1.  Go to Appearance > Preset Background in your dashboard.

Themes that don’t support the preset background won’t have the Present Background menu item under Appearance.

2.  Select the preset image you want to use and select it’s position (Left, Center, Right), if you want the image repeated (No repeat, Tile, Tile Horizontally, Tile Vertically),  how it is attached (fixed or scroll) then click Save Changes.

  • For best results we recommend you use Tile and Scroll.

3.  You can remove the background image at any time by clicking on Reset Settings.

Using your own Background image

1.  Go to Appearance > Background in your dashboard.

  • Themes that don’t support the custom background images won’t have the Background menu item under Appearance.
  • The preview box shows the current background image or selected background color.  If the box is blank it means you have not set a background image or color.

Background page

2.  Click on Choose file, browse for the image on your computer and then click on Upload

Or click on Choose image, if you want to select an image from your media library, select the image and then click Set as Background.

  • Only .jpeg, .gif, and .png files can be used for image headers.

Upload background

3.  Once uploaded or selected from your media library choose your background image display options and then click Save Changes.

  • For best results we recommend you use Tile and Scroll.

Click Save Changes

4.  You can remove the background image at any time by clicking on Remove Background image.

Background Image Display Options

After you’ve uploaded your background image. or set an image as a background from your media library, the background image display options become visible.  These display options control how your background image is displayed on the page.

For best results we recommend you use Tile and Scroll.

Display options

Please note the preview box updates whenever you select a display option so that you have an idea of how the option affects the background image on  your blog.

Preview

Position:

The position option allows you to position the background image on the left, in the center or on the right of the page.  The default setting is left.

Repeat:

The repeat option determines if the background image is repeated.  The default repeat option is tiled.

The repeat options are:

  • No Repeat:  The background image is only displayed once on the page.
  • Tiled:  The tiled option means the background image is repeated both horizontally and vertically throughout the entire page.
  • Tile Horizontally:  The background image is tiled horizontally only.
  • Tile Vertically:  The background image is tiled vertically only.

Attachment: 

The attachment option determines if you want the background image to stay ‘fixed’ in place when a user scrolls down the page or if you want the background image to scroll with the content.   The default attachment setting is scroll.

Removing a background image

If you no longer want to use a background image you just need to click on Remove Background Image.

Remove image

Changing Background colors

1.  Go to Appearance > Background in your dashboard.

Background page

2.  Click on Select Color next to background color.

3.  Select the color you want to use from the color options or add the exact hexadecimal value of the color you would like to use.

4.  The Preview Box updates whenever you select a color so that you have an idea of how the background color might look like on your blog.

Background color

5.  Click Save Changes when you are happy with the color you’ve selected.

Click Save Changes

Removing a Background Color

If you no longer want to use a background color you just need to click on the Clear icon next to the color field.

Click on Clear to remove color

Important tips

  • The background image always appear on the top of the background color if you have uploaded a background image and set a background color.  The background color appears through any transparent areas of the background image or if you have tiled the image horizontally or vertically.  
  • Background color or image will over ride any custom background CSS edits you make using the Simpler CSS plugin.
  • The custom background must be empty to use the Preset background options.   If you’ve uploaded a custom image background you must Remove the Background Image in Appearance > Background before you cam use the preset images in Appearance > Preset Background.
  • Some themes have extensive theme customization options including ability to change background colors.  Examples of these types of themes include WPMU-Triden,  WPMU-Dixi, Mystique, Yoko,  Mandigo and Edublogs Default.  These types of themes add a theme option menu item under Appearance once the theme is activated.  To do more extensive customization you just need to go to Appearance > Theme Options.

Edublogs Support Manager @suewaters on Twitter

Posted in Appearance & Themes, Help