One of the best things about using CSS mark-up and images together is the ability to use the images as backgrounds. You can use CSS to style background images in tables and table cells, but for maximum flexibility, you can use CSS to style the background images by using DIV elements.
The flexibility to repeat or not repeat (generally known as tiling), keep the image as a static background so that it doesn’t scroll with the page elements, and even layer images over each other are simply not things you can accomplish through any other method.
Expression Web 2 contains some of the best CSS interface tools ever available to a designer. Through the various panels and interfaces of Expression Web 2, you can not only take advantage of the benefits of CSS and images to style backgrounds with minimal learning required, if you have an interest in digging deeper under the hood of how CSS works, you can simply see the code results in the attached .css file or embedded styles that occurred from your actions within the Expression Web 2 interface. So in this way, Expression Web 2 is a great tool to learn how to use CSS. Expression Web 2 also brings significant advancements in CSS reporting and usage features.
See Also For more information about using CSS reporting, see "Running CSS Reports" in Chapter 4.
In this exercise, you will use images as backgrounds on various page areas.
Note
USE the CH5 sample site you modified in the previous exercise.
OPEN the CH5 site, if it isn’t already open, and display the backgrounds.htm page in Split view.
In the Design pane, click the <div> (class="top"). In the Apply Styles task pane, right-click .top, and then click Modify Style.
In the Modify Style dialog box, click Background in the Category list, then click Browse beside the background-image box. Navigate to the site’s images folder, double-click the BGtop image, and click no-repeat in the background-repeat list. Then click OK to close the dialog box and return to your page.
You’ve just specified a background image for the top <div> by using the interface.
In the Design pane, click the <div> (class="left"), below where you were just working. In the Apply Styles task pane, right-click .left, and then click Modify Style. Repeat step 2 to insert the BGleft image.
In the Design pane, click the <div> (class="foot") at the bottom of the page. In the Apply Styles task pane, right-click .foot, and then click Modify Style. Repeat step 2 to insert the BGfoot image.
In the Design pane, click the <div> (class="content") that contains the main content. In the Apply Styles task pane, right-click .content, and then click Modify Style. Navigate to the site’s images folder, double-click the BGcontent image, but don’t set any other values. Click OK to close the dialog box and return to your page. Save the page and preview it in a browser.
Tiles of the image you just specified fill the entire area of the DIV element.
Switch back to Expression Web 2. In the Code pane, click the content <div> tag again. In the Apply Styles task pane, right-click .content, and then click Modify Style. Click Background in the Category list, click no-repeat in the background-repeat list, click center in the (x) background-position list, and then click center in the (y) background-position list.
Click OK to save your changes and close the dialog box. Save your page and preview it in a browser.
The background image shows only once.
Take this watermark background situation a little farther and make the following modifications to the style: In the Apply Styles task pane, right-click .content, and then click Modify Style. Specify the following settings:
Category
Option
Value
Position
height
300px
overflow
auto
Background
background-attachment
fixed
Click OK to close the dialog box and return to your page. Save the page and preview it in a browser.
The background image now stays static within the page and the text scrolls over it. It’s looking more like a watermark background.
To use the CSS background image property for more than just showing an image, consider the previous exercise where you added text to an image by using Paint from within Expression Web 2. It showed text over a picture but that’s about it, plus it wasn’t something that a search engine would pick up or that a screen reading browser would be able to read.
In the Code pane, click just to the left of the <h1> tag in the content DIV element, type the following code, and then press
:<div><p>Emergency Service</p></div>
In the Design pane, click this newly inserted DIV element, and then click New Style in the Apply Styles task pane.
In the New Style dialog box, change the Selector to .emgsvc, and then specify the following settings:
Category
Option
Value
Define in
Current page
Apply new style to document selection
Selected
Background
background-image
BGPagerCrop.jpg
background-repeat
no-repeat
Position
width
129px
height
156px
float
right
Click OK to save your changes and return to Design view in Expression Web 2.
Tip
In order to make designing easier, try this: create a new Web page, and save it in your images folder. Select all the images in the folder, and then drag them onto the page. The page now displays all the images, providing a visual cue as to which image is which. Expression Web 2 enters the dimensions of each image in its image tag.
Save the page, and preview it in a browser.
You’ve now got an image in your page via a styled background, and you’ve got text on top of it.
To make your text appear similar to the exercise in Paint, return to Expression Web 2, click the paragraph inside the .emgsvc DIV element that contains the words Emergency Service, and then click New Style in the Apply Styles task pane. Type .emgtxt in the Selector box, specify the following settings, and then click OK to close the dialog box:
Category
Option
Value
Font
font-size
13px
font-weight
Bold
color
#FF0000
Background
background-color
#FFFFFF
Box
margin top
143px (Same for all check box cleared)
Save the page and preview it in a browser.
Notice that you’ve got a very close representation of the image you edited in an earlier exercise, but this time it’s actual text within your page, not just an image of text superimposed on a picture.
Although this exercise got you started with how to style background images and how to manipulate the background’s property, it’s not intended to be a treatise on CSS. You can do so much with CSS "styles" that entire books could be, and have been, written on the subject and even then they’re forced to leave out some details. It’s highly recommended that you take the time to learn about CSS and how you can really maximize its impact on how you design your pages.