Background Images - HTML

Besides using solid colors for backgrounds you can also use images. For example, the paragraph uses a gradient image for the first paragraph (the image is shown by itself after the paragraph for comparison).To add an image as a background, you use the background-image property. This property has the following format:

background-image: url(“url—to—image”);

For example, the paragraph in Figure 21-4 uses the following code, which specifies gradient.gif as the background image:

p { background-image: url(“gradient.gif”);
height: 100px; width: 500px;
border: thinsolid black; }

When using a dark background color, you should usually use a light foreground color.

When using a dark background color, you should usually use a light foreground color.

Note:The example has a few additional properties defined to help make the example. A border was added to the paragraph and image to help show the edges of the image. The height and width of the paragraph were constrained to the size of the image to prevent the image from repeating. For more on repeating and scrolling background images, see the next section. The background image can be used for some interesting effects, where a frame image is used as text ornamentation. (Again, the image is repeated alone, with border, for clarification of what the image is.) The following CSS definition is used for the paragraph:

p.catborder { height: 135px; width: 336px;
background-image: url(“cat.gif”);
padding: 80px 135px 18px 18px; }

This code uses several additional properties to position the text within the border frame:

An element’s background extends to the edge of its padding—sizing the padding can size the background.

An element’s background extends to the edge of its padding—sizing the padding can size the background.

  • Explicit width and height properties specify the size of the full image.
  • Explicit padding values ensure that the text stays within the box.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics