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:

To install a color gradient in the background of your Scalar pages, you will have to begin by 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 (top) and stop (bottom) with in your color-filled region. Next determine and select how tall you like your color-filled region to be. Next, 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 only need your gradient image to be 10 pixels wide. 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 end color of your gradient till the bottom of all your Scalar pages, regardless of their height.

Horizontal Gradient:

To install a color gradient in the
background of your Scalar pages, you will have to begin by 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. Next, 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 only need your gradient image to be 10 pixels tall.
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,” for setting a background image. This feature 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 the 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

Learn more about background image position here.

Comment on this page