As in HTML we can specify any image as background for any element using CSS.
By default image is set to repeat. So, that it covers the whole element.
We can specify a background image as follows:
Check this out: http://css3wdesign.net16.net/back.html
Below is the example of a bad combination of background image and text.
http://css3wdesign.net16.net/badback.html
The text is barely readable in the above example.
By default image is set to repeat. So, that it covers the whole element.
We can specify a background image as follows:
Below is the example of a bad combination of background image and text.
http://css3wdesign.net16.net/badback.html
The text is barely readable in the above example.
Horizontal And Vertical Repeat:
By default, image is set to repeat both horizontal and vertical. But you can control this behaviour too.
To set an image to repeat only horizontal (repeat-x):
In this link image is set to repeat only vertically (repeat-y) : http://css3wdesign.net16.net/repeatv.html
Set Position and no-repeat:
We can specify too, that whether to repeat an image or not.
The code snippet given below will set image not to repeat.
Sometimes we need to specify some position for an image too.
Have a look: http://css3wdesign.net16.net/norepeat.html\
Shorthand Property:
We can manage all of these things in a single line of code:
To do so, the order of property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It doesn't matter if any of the property value is missing.
Download all example files given above: background-image.rar
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.