Aportfolio

Background Image

  1. Home
  2. Background Image

To change only the image of the background of the page, use the instructions below. For more specific control over the page colors (such as changing the menu colors and fonts), use our UCWbL CSS guide.

Step 1

Click Portfolio Tools then choose Settings

portfolio tools > settings

Step 2

Scroll down to the section marked Choose A Theme and click Customize to open the full menu.

choose a theme > click customize

Step 3

To use an image as the background of your Digication page, click the checkbox to the left of Use Background Image, then select the Browse icon to search your local computer for the image.

You can control the repetition (Background Image Repeat) of the image by checking the box for Horizontal (left to right) and/or Vertical (top to bottom) repetition of the image, or choose the starting Background Image Position by checking the bubbles next to each option. To repeat the image over the entire background, choose both Horizontal and Vertical repetition.

Note: It is possible to change the image after it has been saved, so adjustments can be made to the layout of images after you click Save. The image to the right features both Horizontal and Vertical repetition to make the image appear multiple times with Left Center positioning.

 

check use background image and click browse to select image 

select background image from your computer

digication page with background image

Step 4

(Optional - to make the main container opaque)

While in the Custom Settings menu, under the CSS entry box find the item named "#header_container, #main_container" and add a new line to enter the text "opacity: 0.9;" (without the quotation marks).

The percentage of the opacity is controlled by numbers starting with 1.0, where 1.0 is 100% of the main container visible (non-transparent), all the way down to .1, or 10% of the main container visible. We recommend using .9, or 90% to start, as well as ensuring that you have a high contrast value for your text (i.e. a light background color and dark text). You can adjust opacity as needed, but make sure your readers can still view your text!

If you would like to hide the header image and use only a background image, enter the following div on a new line after a } bracket:
#site_headerimage {
display:none;
}

Note: Be sure to include the semicolon for each item or the code will not work!

digication page with opaque background image 
Step 5 

Once you have made the changes to the background image, scroll to the bottom of the Settings page and click Save to keep your new background.

save