Background Color

CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of Scalar pages one needs to begin by declaring the selector for the entire page (body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of Scalar pages to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:


To change the background color of Scalar pages to black using hexadecimal colors, one would insert:


And to change the background color of Scalar pages to bright blue using RGB colors, one would insert:


Learn more about CSS background colors here.

Background Gradients

Background gradients are an easy way to liven up your Scalar project. A color gradient is a color-filled region which incrementally, that is, imperceptibly, blends from one color to another. A vertical gradient blends two colors gradually from top to bottom. A horizontal gradient blends two colors from left to right.

Vertical Gradient:

Installing a color gradient in the background of your Scalar pages begins with creating a jpeg of the gradient you wish to use. This can be done with Photoshop and many other graphics editing programs. One can also use an online gradient image generator like Dynamic Drive’s Gradient Image Maker or image-map.com’s Online Gradient Background Generator. The key to choosing a suitable gradient image generator is to find one that provides you with the 6 digit hex color code for the colors you choose. You’ll need to keep the hex color code for the bottom color of your gradient image for future use. Using one of these generators, simply choose which colors you’d like to start (top) and stop (bottom) with in your color-filled region. Next determine and select how tall you like your color-filled region to be. Then determine and select how wide you’d like your color-filled region to be. Since we want the full width of all you Scalar pages to be filled with your gradient and since the width of those pages will vary, we will be using CSS to tell your browser to “repeat” your gradient image horizontally until every given page is full, regardless of its width. Thus you don't need your gradient image to very wide, perhaps 10 pixels. Finally, save the image generated onto your computer and be sure to save and/or remember the 6 digit hex-color code of your bottom color.

Next, upload the gradient image from your computer into your Scalar media library. Once you’ve done this, you want to copy the url for the image. Just after you upload your image you should be taken to a Scalar page which displays the image. Click on “Details,” just below the image and then on the “Metadata” tab within the “Details” view. Copy the url for the image located in the sidebar. As an alternative, you can always go back to your dashboard, click on the “media” tab, locate your gradient image in your media library, click “View,” and copy the url displayed there.

Once you have the url, head to your Scalar dashboard and click on “Book Properties.” Scroll down to the “Custom style” field and input the following:

body {background: url("http://scalar.usc.edu/works/test-9/media/gradient.php.jpg") repeat-x #000000;}

while replacing "http://scalar.usc.edu/works/test-9/media/gradient.php.jpg" with the url for your gradient and #000000 with the 6 digit hex color code for the bottom color of your gradient image. Inputting this hex color code at the end of the this CSS statement will tell the browser to display this color when the gradient image ends, essentially continuing the bottom color of your gradient till the bottom of all your Scalar pages, regardless of their height.

Horizontal Gradient:

Installing a color gradient in the background of your Scalar pages begins with creating a jpeg of the gradient you wish to use. This can be done with Photoshop or many other graphics editing programs. One can also use an online gradient image generator like Dynamic Drive’s Gradient Image Maker or image-map.com’s Online Gradient Background Generator. The key to choosing a suitable gradient image generator is to find one that provides you with the 6 digit hex color code for the colors you choose. You’ll need to keep the hex color code for your bottom color for future use. Using one of these generators, choose which colors you’d like to start (left) and stop (right) with in your color-filled region.  Next determine and select how wide you'd like your color-filled region to be. Then determine and select how tall you’d like your color-filled region to be. Since we want the full height of all you Scalar pages to be filled with your gradient and since the height of those pages will vary, we will be using CSS to tell your browser to “repeat” your gradient image vertically until every given page is full, regardless of its height . Thus you don't need your gradient image to very tall, perhaps 10 pixels. Finally, save the image generated onto your computer and be sure to save and/or remember the 6 digit hex-color code of the color with which your gradient ends. 

Next, upload the gradient image from your computer into your Scalar media library. Once you’ve done this, you want to copy the url for the image. Just after you upload your image you should be taken to a Scalar page which displays the image. Click on “Details,” just below the image and then on the “Metadata” tab within the “Details” view. Copy the url for the image located in the sidebar. As an alternative, you can always go back to your dashboard, click on the “media” tab, locate your gradient image in your media library, click “View,” and copy the url displayed there.

Once you have the url, head to your Scalar dashboard and click on “Book Properties.” Scroll down to the “Custom style” field and input the following

body {background: url("http://scalar.usc.edu/works/test-9/media/gradient.php.jpg") repeat-y #000000;}

while replacing "http://scalar.usc.edu/works/test-9/media/gradient.php.jpg" with the url for your gradient and #000000 with the 6 digit hex color code for the bottom color of your gradient image. Inputting this hex color code at the end of the this CSS statement will tell the browser to display this color when the gradient image ends, essentially continuing the end color of your gradient till the the full width is filled up.

Background Images

Scalar has an in-built feature, located in “Book Properties,” which allows you to designate an image from your Scalar library to act as your background. Once chosen, Scalar will tile your image horizontally and vertically to fill the full width and height of every page in your Scalar project. In this section we’ll learn to instruct the browser to tile only vertically or horizontally, to not tile at all and to position your background image.

Background Image Repeat

Once you’ve set your background image in Scalar’s “Book Properties” scroll down to the “Custom style” field. If you’d like your image to only tile horizontally across the page insert the following code:


If you’d like your image to only tile vertically down the page insert the following code:


If you don’t want your image to tile at all insert the following code:


Learn more about background-repeat here.

Background Image Position

CSS gives you a few options for positioning your background image, two of which we’ll talk about here. First, you need to decide whether you want to position a single instance of your image (no-repeat) or position where the tiling of your image begins. If you just want your background image to appear once, at a certain location on the page, then you’ll need to tell the browser that you don’t want your image to tile vertically or horizontally (with "background-repeat: no-repeat;") before declaring where you’d like the image to be placed.

First, you can situate your background image by declaring its x and y position (in pixels). Thus, for instance, to position your background image 100 pixels from the left-hand side of the page and 200 pixels from the top (without tiling) you would insert the following:

Body {
background-repeat:no-repeat;
background-position: 100px 200px;
}

Second, you can situate your background image with keywords denoting its vertical (left, center and right) and horizontal (top, center and bottom) placement. Combinations include:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Thus to situate your background image with keywords (without tiling) you would insert the following lines:

Body {
background-repeat:no-repeat;

background-position: top right;
}

Learn more about background image position here.

Comment on this page