Backgrounds and borders


Build a Formation Gadget (BFG)

Following are the description and operation, by rows, of the BFG options via dropdown list. In order to select certain options, you must have the required rank (see Rank Privileges).


Background Images


Sizing the Background Image

background-size: cover — The browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. In this case, part of the image is likely to end up outside the box.
background-size: contain — The browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box.

Positioning the Background Image


Gradient Backgrounds


Multiple Background Images


Background Attachment

Go to RT's Background Attachment Example

Using the background shorthand property


Borders

Borders

Examples of different borders.


Rounded corners

Rounded Borders

Examples of rounded corners.
In these corners we have rounded corners.


Test your skills: backgrounds and borders

Backgrounds and Borders Test One

Backgrounds & Borders

Backgrounds and Borders Test Two

Backgrounds & Borders