Backgrounds & Borders

By simply adding background colors or images and borders to elements, you can make them appear as though they could be graphics and not designed with HTML/CSS. Ultimately, this type of thing is what makes CSS so powerful to use because it can save you a ton of time and even help you avoid outsourcing for graphics work.

Element Borders

The border command allows you to create a border around an HTML element. The value for this command requires three parts: an amount of pixels for the width of the border, the border style, and the color of the border.

The border style can be any one of a number of possible values that controls how the border looks. I've listed these possible values below and provided a brief description for each:

• none - No border.
• dotted - Dotted line border.
• dashed - Dashed line border.
• solid - Solid line border.
• double - Double line border.
• groove - 3D grooved border.
• inset - 3D inset border.
• outset - 3D outset border.
• ridge - 3D ridged border.

I have provided an example of a DIV element with a border around it below:

<div style="width:250px;height:250px;float:left;margin:5px;padding:5px;border: 1px solid #000000;">Text Content #1</div>

The last CSS command in that example creates the border. As you can see, there are three parts to my value and each is separated by a space. The first part of the value is the width of the border in pixels (1px), the second part is the border style name (solid), and the third part is a hex color code that controls the color of the border (#000000). This creates a 1 pixel wide, black, solid line border around the entire element.

Besides being used for design purposes, I sometimes use borders for another purpose: troubleshooting. If I am creating a layout with HTML and something isn't lining up right, using borders can be an easy way to figure out what is going wrong. Just add borders to all of your elements to truly see how everything is lining up. I have done this many times and been able to immediately realize what I did wrong after seeing everything with borders.

If you remember from margin and padding that you can apply those commands to just one side of your element by adding a hyphen and an additional phrase to the end of each command. The border command works the same way, so you can use border-top, border-bottom, border-left, and/or border-right to apply a border to just one side of an element.

Element Backgrounds

Setting a solid background color for an element can be done with the background-color command. The value should be a hex color code that controls the background color.

The example below uses the previous example with an added background color. The background takes up the height/width of the element and the padding space.

<div style="width:250px;height:250px;float:left;margin:5px;padding:5px;border: 1px solid #000000;background-color:#CCCCCC;">Text Content #1</div>

This example fills the DIV element with a light-grey background color (#CCCCCC).

A background can also be set as an image file instead of using a solid color. This allows for a nearly endless variety of design options.

By default, a background image will be repeated horizontally and vertically and placed in the top-left corner of an element. You can use the background-image command to show an image this way, but in most cases, this is not how you will want an image to be displayed, so I recommend using the standard background command instead to have more control over the image.

The background command actually takes the values of up to 8 different background commands. You can choose to use as many or few of these as needed and use them in any order: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-image. If you would like to do more complicated things with background images, just search Google for CSS information on any one of those commands to find out more

For this tutorial, I want to show you how to use this command to display a background image. I have provided some example code below that shows how this is done:

 <div style="width:250px;height:250px;float:left;margin:5px;padding:5px;border: 1px solid #000000;font-weight:bold;font-size:24px;text-align:center;background:#CCCCCC url('https://ryanstevensonplugins.com/images/background-example.png') no-repeat fixed center;">Text Content #1</div>

In this example, my background command has a total of 5 values in this order: background-color (#CCCCCC), background-image (url('https://ryanstevensonplugins.com/images/background-example.png')), background-repeat (no-repeat), background-attachment (scroll), and background-position (center).

The background-color value is used as a fallback in case the image isn't loaded (a very small percentage of internet users actually have image downloading disabled in their browsers, for example).

The background-image value starts with url, then an opening parenthesis and single quote (', then the web address of the image file, and then closes with another single quote and a closing parenthesis ').

The background-repeat value is set to no-repeat, which prevents the entire image from being repeated. You could also use repeat as a value to make it repeat both horizontally and vertically. A value of repeat-x makes the image only repeat horizontally, while a value of repeat-y makes it only repeat vertically.

The background-attachment value specifies whether the background scrolls with the rest of the page or not. A value of scroll is the default value, which causes the background image to scroll as normal with the element. A value of fixed causes the background to maintain the same position in the window, even when scrolled (this is how pages are created that have a background image that doesn't scroll with the rest of the page). A value of local could also be used to make the background scroll with the elements contents, although this value isn't used too often. Technically, I didn't need to use this because I am using the default value, but I wanted to use it and explain it so you would know how to use it when needed.

The background-position value sets the starting position of the background image in the element. The value for this should actually be a two-part value, but I have left off a value because I am using center as my value (an omitted value for this defaults to center).

There are a few different types of values that can be used for this two-part value.

The first type is a keyword based value: left, right, top, bottom, or center. For example, if I wanted the image to start in the top-right corner of the element, I would use the value of right top.

The second type is a numerical value, which can either be in pixels or a percentage (technically, any CSS supported size unit can be used here, like em for example). Any combination of these measuring units can be used, but the first value is for the x position (horizontal) and the second value is for the y position (vertical). For example, the value of 0% 0% or 0px 0px represents the top-left corner of an element and the bottom-right corner is 100% 100%. If one value is left out, it defaults to 50%.