![]() ![]() ![]() cover, scaling the background image to be as large as possible so that the area of the element is completely covered by the background image some part of the image may not be shown.a percentage, setting the width and height as a percentage of the parent element e.g., background-size:50% 50%.a length, setting the width and height of the background image (in any valid CSS length units) e.g., background-size:20px 40px.You may use any of the following as values for background-size: CSS3 introduces the background-size property, which allows you to control the size of the background image as displayed in its parent element (the element for which the image serves as the background).The code looks like this when used in a full HTML document: The following code renders the background image on the right: īackground-repeat: repeat-y background-position: right any combination of the above (e.g., top center).The background-position property is used with background-image to specify the location of a background image.Notice that the scroll bar on the right side is all the way at the bottom, yet the image is still in the upper-right corner: This code renders the following when used in a full HTML document. īackground-repeat: no-repeat background-attachment: scroll Note that this code has a lot of repeated text to enable the scroll feature to appear on the window. According to the specification, background-attachment specifies whether a background image is fixed relative to the viewport (e.g., the browser window) or scrolls along with the document. The background-attachment property is used with background-image to specify whether a background image should scroll as the content is scrolled or whether the content should scroll over it. ![]() The following shows sample code that tiles the image horizontally: īackground-color: #ff6600 background-image: url(Images/block.gif) The background-repeat property is used with background-image to specify whether and how a background image should repeat.This code renders the following when used in a full HTML document: ![]() It can be applied to block elements and inline elements.
0 Comments
Leave a Reply. |