|
|
The background-position property allows you to position an element’s background image. This property’s use isn’t as straightforward as some of the other properties. The basic forms of the values for this property fall into three categories:
Backgrounds scroll by default, as shown by the second paragraph.
You can specify that a background image remain fixed under the element with the background-attachment property.
If only one value is given, it is used for the horizontal placement—the image is centered vertically. You can mix the first two formats (for example, 10px 25%), but keywords cannot be mixed with other values (for example, center 50% is invalid). The first two forms are much like the value formats used in other properties. For example, the following definition positions the upper-left corner of the background in the middle of the element’s padding area:
background-position: 50% 50%;The next definition places the upper-left corner of the background 25 pixels from the top and left sides of the element’s padding area:
background-position: 25px 25px;Several keywords can be used for the third format of the background-position property. They include top, left, right, bottom, and center. For example, you can position the background image in the top, center of the element’s padding using the following:
background-position: top center;Or, you can position the background image directly in the center of the element’s padding with the following:
background-position: center center;Tip:Combining the background attributes can achieve more diverse effects. For example, you can use background-position to set an image in the center of the element’s padding, and specify background-attachment: fixed to keep it there. Furthermore, you could use background-repeat to repeat the same image horizontally or vertically, creating dynamic striping behind the element.
|
|
HTML Related Tutorials |
|
---|---|
XML Tutorial | HTML 4 Tutorial |
HTML 5 Tutorial | Java Tutorial |
CSS Tutorial | XHTML Tutorial |
Html Tutorial
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Lists
Images
Links
Text
Special Characters
Tables
Page Layout With Tables
Frames
Forms
Multimedia
Scripts
Introducing Cascading Style Sheets
Creating Style Rules
Fonts
Text Formatting
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Element Positioning
Defining Pages For Printing
Javascript
Dynamic Html
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Webdevelopment Software
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
Security
Privacy
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.