Repeating and Scrolling Background Images - HTML

Element background images act similarly to document background images—by default, they tile to fill the given space. where the smiley image is tiled to fill the entire paragraph box. Notice, also, how the right and bottom of the background are filled with incomplete copies of the image because the paragraph size is not an even multiple of the background graphic size.

You can also use images for element backgrounds.

You can also use images for element backgrounds.

You can specify the repeating nature and the actual position of the background image using the background-repeat and background-attachment properties. The background-repeat property has the following format:

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

The background-attachment property has the following format:

background-attachment: scroll | fixed;

The background-repeat property is straightforward—its values specify how the image repeats. For example, to repeat our smiley face across the top of the paragraph, specify repeat-x, as shown in the following definition code:

p.smiley { background-image: url(“smiley.gif”);
background-repeat: repeat-x;
/* Border for clarity only */
border: thinsolid black; }

Background images can be used as textual ornamentation.

Background images can be used as textual ornamentation.

The background-attachment property controls how the background is attached to the element. The default value, scroll, allows the background to scroll as the element is scrolled. The fixed value doesn’t allow the background to scroll; instead, the contents of the element scroll over the background.The scroll behavior can be seen where two identical elements are shown. The bottom paragraph has been scrolled a bit, and the background scrolls with the element’s content.

The following code is used for the paragraphs:

p.smileyscroll { height: 220px; width: 520px;
overflow: scroll;

By default, background images will tile to fill the available space.

By default, background images will tile to fill the available space.

background-image: url(“smiley.gif”);
background-attachment: scroll;
border: thinsolid black; }

Note:Notice the use of the overflow property in the code. This property controls what happens when an element’s content is larger than the element’s defined box. The scroll value enables scroll bars on the element so the user can scroll to see the rest of the content. The overflow property also supports the values visible (which causes the element to be displayed in its entirety, despite box size constraints) and hidden (which causes the part of the element that overflows to be clipped and inaccessible).If you change the background-attachment value to fixed, the background image remains stationary.

Repeating a background image horizontally with the repeat-x value of the background-repeat property

Repeating a background image horizontally with the repeat-x value of the background-repeat property

Tip:Non-scrolling backgrounds make great watermarks. Watermarks-—named for the process of creating them on paper-—are slight images placed in the background of documents to distinguish them. Some companies place watermarks of their logo on their letterhead.


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

HTML Topics