CSS Background Attachment And CSS Shorthand Tutorial
Inprevious tutorialwe learned about various methods of associating CSS in our HTML document and their priorities, setting background colors, images and how to set their properties, positioning background images. In this tutorial we will learn about the background attachment property of CSS and a small introductory guide on the shorthand property of CSS background. So let us move with the CSS background attachment first.
CSS Background Attachment Property
When we declare a background-attachment property in CSS this sets the background image to react in different ways, we can either set the background image to be fixed or set it to response with scroll, when we set the background image to scroll, it scrolls with the element. Following is the syntax for CSS background attachment is:
The table below shows all possible values for background attachment
The background image scrolls with your other elements and is default property for background attachment.
The background image feels to be glued on its position, it doesn’t scroll remains in same position which is configured.
Initial sets the default behavior for the background image. Initial is not supported in internet explorer.
This sets the background image to scroll with the content of its parent.
With inherit the background image will inherit behavior / value of its parent element.
In the above example the CSS rule for background attachment is applied to the element with class test-background-attachment and it is kept fixed. So the background image will be at fixed position while the other contents will scroll. The sample files are attached at end of this tutorial you can download and do your own experiments for background attachment.
What is CSS Shorthand?
The CSS shorthand property is a very handy tool when you are in a rush and want to keep the CSS file size low, this allows you to let compile multiple rules and write in a single line. This is a bit tricky, you can set borders, margins, padding, colors, background, font and much more with shorthand property, it allows let the designer write less line and produce the same output. For setting the background properties of an element with shorthand you can use the following syntax with given parameters:
The following sample shows how you can use CSS background shorthand property, this allows you to generate the same UI for which you will need to use different properties by using a single line of code.
background:#000 url(image2.png) center center no-repeat;
Here is the output for CSS shorthand and the normal CSS codes. There was no difference.
See how we mixed up our rules and created a single line rule doing the same thing for background with the CSS shorthand property. This is fun. I am attaching sample files below, you can download and check for reference.
In next tutorial we will learn about the height and width property of CSS. If you have any question or suggestion for me, please let me know in comments below or contact us, if you find this tutorial then like us in social media and share the content.
CSS Height and Width Property Tutorial For Beginners