Web Design with HTML and CSS

190

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

Working with absolute positioning

You now need to place a large splash image in the main column and place it below your

heading 1 (currently labeled SmoothieWorld is your #1 destination for smoothie recipes”). You can

create this layered eff ect of text on an image in several ways, but nothing you have learned

up to this point would be ideal. The following paragraphs describe the methods you have

learned, and explain why they would not work.

Method 1

Open Photoshop, add a text layer to your splash image, and save it as an optimized web

graphic. The problems with this method are:

• Text in a graphic becomes invisible to search engines.


• You lose accessibility for other devices, such as screen readers.


• The method is ineffi cient when updating text, since it requires access to the original
  Photoshop fi le.

Method 2

Place the splash image as a background image within the maincolumn and position the

heading 1 over it. The problems with this method are:

• CSS background images are to be used as decoration, not as replacement for content.


• You can only use one background image for any given div; multiple background
  images are not possible in CSS.
  The method you will learn in this subsection takes advantage of relative and absolute
  positioning in CSS. Following this method, you will fi rst insert your splash image as a
  standard inline image in HTML and add a new div container for the text. You will then
  position this new container as needed.
  Start by adding the inline image into the maincontent div, as explained below.

1 Type the following code (highlighted in red) between the heading 1 and heading 2 in

the maincontent div:

<h1>SmoothieWorld is your #1 destination for smoothie recipes.</h1>

<img src="images/frontpage_splash.png" width="551" height="270"

alt="frontpage_splash" />

<h2>Our mission statement </h2>

Save the page and preview it in your browser. The image is located between the two

headings.

Superimpose the <h1> text on the image (similar to a layer in Photoshop) by wrapping a

new div container around it with the name splash, as indicated below.