Background and Border Codes

[ Background Color ] [ Background Images ] [ Color & Images Together ] [ Background Position, Repeat etc. ] [ Multiple Background Images ] [ Borders ]

Color (always spelled the American way) can be set using the colors name, or its Hex code.

Browsers recognize an increasing number of color names, such as aqua, gray, lime and maroon. You can find a full list of widely recognized color names [ on the w3schools website ]

Hex codes are a fully supported version of color names. Every shade of every color imaginable has a hex code. It's a 6 character code started with a # sign, for instance #ffffff is the hex code for white, and #000000 is black. You can find a pretty long list of hex codes on [ Webmonkey ].

To apply the color to the page background, just use:



To apply it to a specific table, use:


(substituting leftnav for the class of the table you want to put the background color on. You can find the classes of any table on the Profile Codes/ Journal Codes etc pages.


You may have heard of "Websafe" colors...

In the bad old days, when the majority of computers struggled to show more than 256 colors, the websafe hexadecimal color chart was invented. It consisted of 216 colors that these systems could display cleanly. However, with the advent of modern technology, it's probably no longer necessary to take such precautions, since most computers can now display millions of colors.

To make a background image show up on your page, you first need to upload it to the internet. Images saved on your computer will not work! There are a lot of ad supported hosts like [ Tinypic ] and [ Photobucket ] that will let you store your images online for free. You can find a list of free hosts and more help on uploading images [ here ]. Just pick a host and go to their site to upload your image, but instead of pasting the "link", or "url" into an image tag, you're going to want to paste it into a background code, like this:

(Nb, don't forget that links or urls must always be FULL- ie include the http:// bit).



You can also put background images on specific tables, eg:


(as with colors, you can apply a background image to any table on your VF page. Just find the class of the table you want on the Profile Codes/ Journal Codes etc pages, and use that in place of ".leftnav".

Sometimes you're going to want both a background image, and a background color on the same part of your page, for instance, if your image isn't repeated and it only takes up a small part of the page, or if your background image provides the dark background necessary to make light text show up properly, but you're worried it might not load and people will struggle to read your profile.

Some people use separate background-image and background-color styles, like this:



There's nothing wrong with that, it does exactly the same thing as the code below and some people find it simpler, but I prefer the lazy all in one method:


Which is just simply to write the color before the image path.

CSS provides ways to define exactly how you want your background images to behave:



background-repeat defines whether the image repeats. It can be either repeat (default), no-repeat, repeat-x (repeats horizontally only), or repeat-y (repeats vertically only). For example, this code would make an image of your choice repeat vertically all the way down your page:




background-position is where on the page you want your background to appear. It is usually 2 parameters one after the other- vertical position followed by horizontal position, for instance top left or bottom center. Vertical position can be top, center or bottom, and horizontal position is left, center or right. Nb, top left is default. This example code will place a background image in the bottom right corner of the page:




background-attachment simply defines whether the image stays in the same position on the page, or moves down as the user scrolls down the page. It has 2 possible values, fixed or scroll (fixed being the still background). On this example the background image will not scroll with the text:


Nb, background-attachment only works on the page body, and the default value is scroll.

One of the most common questions I get asked, is if you can have more than one background image on your page, for instance if you want one image in the top left corner, and another separate one in the bottom right. If you're familiar with HTML you'll realize that its not a good idea to do this by making both images into one big image, as it will only work at one screen resolution, and will take ages to load anyway, but if you're familiar with CSS you'll know that you cant set more than one background on the same thing. So how do you do it then?

Let's take a look at the structure of the VF page.



As you can see, you have the page body and then the main table inside it. By default the main table is transparent, so any background you put on the page body will show through it. Therefore, one way to make it seem like you have more than one background on the page body, would be to apply one to body, and one to the main table, like this:


Nb, If you use this method be careful to set background position for at least one of your images, so they don't end up on top of each other, and don't give the main table a background color or the background image on the page body will be hidden by it! If you want a background color as well, only apply it to page body.

Borders can be used on divs, tables, images or the entire page, in fact almost anything! To apply a border to the whole page, just apply it to body. Applying a border to table is a quick way to affect every table on your page, or you can just use the tables class (eg .leftnav) to create a border on one specific table.

Lets use defaultpic (your main/ default picture on VF) for a few examples. First, border actually has 3 main properties, and you can set them in separate bits like this:



Or, you can use the lazy all-in-one method which does exactly the same thing:



Now we've got the hang of that, let's take a look at each different property. First size. Hopefully this ones pretty self explanatory. Size is thickness of the border. It's measured in px (pixels). 1 pixel is tiny- about the size of a full stop on your screen.

Style is the look of your border:

dotted

dashed

inset

outset

ridge

groove

double

Finally color, which can be most common color names, or any hex code. To save me repeating the same thing twice on the same page, please refer to the [ background colors ] bit for more information on color.


Borders that don't go all the way around

Sometimes you might want to apply a border to only one or two sides of something, and for this CSS allows you to specify whether the styles are for border-bottom, border-top, border-left, border-right, or just border (all the way around).

border-left

border-top

border-right

border-bottom

You could even use one type of border for 3 sides of something, and a different one for the fourth, eg:


Nb, If you do this, dont forget that borders override each other, so if you must always put them in the right order- border before border-top / border-bottom etc, or you'll end up with the border style overriding the individual top / bottom / left styles and all 4 sides will match.