CSS 3 Tutorial Banner Image

CSS Background Attachment And CSS Shorthand Tutorial

Views: 1101

CSS Background Attachment And CSS Shorthand Tutorial

 

In previous tutorial we 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

CSS background-attachment

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:

background-attachment:value;

The table below shows all possible values for background attachment

Value Definition
scroll The background image scrolls with your other elements and is default property for background attachment.
fixed The background image feels to be glued on its position, it doesn’t scroll remains in same position which is configured.
initial Initial sets the default behavior for the background image. Initial is not supported in internet explorer.
local This sets the background image to scroll with the content of its parent.
inherit With inherit the background image will inherit behavior / value of its parent element.

Example:

HTML:

<div class="test-background-attachment">

</div>

CSS:

.test-background-attachment

{

width:400px;

height:400px;

border:1px solid;

background-image:url("image.jpg");

background-repeat:no-repeat;

background-position:center center;

background-attachment:fixed;

}

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 Property

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:

background: <color>|<url>|<pos-x>|<pos-y>|<repeat/no-repeat>|<attachment>;

See the following rules below and we will see how we can convert it to a single line using the shorthand property.

HTML:

<div class="test-background-attachment">

</div>

CSS:

.test-background-attachment

{

width:400px;

height:400px;

border:1px solid;

background-color:#000;

background-image:url("image2.png");

background-position:center center;

background-repeat:no-repeat;

}

CSS Background Shorthand

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.

HTML

<div class="test-background-attachment-shorthand">

</div>

CSS

.test-background-attachment

{

width:400px;

height:400px;

border:1px solid;

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.

CSS shorthand property outout

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

Comments: 5

Your email address will not be published. Required fields are marked with *

  1. You’ve made some decent points there. I checked on the
    web to find out more about the issue and found most individuals will go
    along with your views on this site.