Mr. Morton's ICT

CSS III

Today we’ll be working with backgrounds. Use this as a starter:

<html>
<head>
<style type=”text/css”>
body {background-color:#b0c4de;}
</style>
</head>

<body>
<h1>Text!</h1>
<p>This is a good place to start</p>
</body>
</html>

Now use these tags in the head:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Note: div is a bit different as other elements can be coded within it. Like this:

<div>
Text in a div element.
<h1>Heading background-color</h1>
<p>Paragraph background color</p>
Still IN the div element.
</div>

Getting a background image from a site:

<html>
<head>
<style type=”text/css”>
body {background-image:url(http://www.zingerbugimages.com/backgrounds/gold_batik_pattern.jpg);}
</style>
</head>

<body>
<h1>New background image should appear</h1>
</body>
</html>

Here’s an online library for finding web-based background images.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.