Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>
Backgrounds aren't just for the "body"
Instead of having an
img
element within the XHTML, we can include design images in the CSS. This example displays the
flag.png
with the h1 of the markup.
Example 10.28
Example 10.28 Source:
<div id="ustitle" > <h1>United States Constitution</h1> </div> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi. Integer euismod cursus erat. </div>
In
style
element (
<style type="text/css">
) within
head
element:
div#ustitle { height: 80px; background: #ddd url(images/flag-small.png) left center no-repeat; margin-bottom: 0.5em; } #ustitle h1 { padding-top: 0.5em; text-align: center; font-family: tahoma,arial,helvetica,sans-serif; }
Example 10.28 Rendered:
With Styles
Without Styles
Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>