Google Plus Facebook Twitter RSS YouTube

CSS background-image Property

background-image is a CSS styling property that sets an image or pattern as background to an element repeatedly. It applies an image to background of element. Thence it is named background-image. It was originally introduced at the time of introducing cascading style sheet level 1. Nevertheless, it is used in current styling technology CSS3. Every element can display its content though an image is set to element as background because the applied image file is appeared behind to the content within the area of the element. The usage of css background-image property is very common in modern professional website designing. A best example is; a pattern is set repeatedly to each of our site’s page by setting it to body element using CSS background-image property.

CSS background-image property

Syntax

The syntax of CSS background-image property was defined in CSS1 styling system. It was used in CSS2 styling and also uses in current styling system CSS3.

CSS Code

  background-image: value;

It accepts three types of values, given below.

  1. none
  2. An image file
  3. inherit

The default value of background-image property is set to none. For this reason, it cannot display any image as background to element. The actual purpose of introducing this property in cascading style sheet is to set an image to an element as background. So, the URL of the image file has to be specified through url( ) as value for showing an image as background to element repeatedly. The value inherit understands this property to consider parent element's value as its value.

It can applied to element using inline css, internal css and external css styling methods but inline styling system is no longer recommendable method in order to separate the content from style data. It has been used since CSS1 styling system. So, all older and latest version web browsers (especially Google Chrome, Safari, Mozilla Firefox, Opera and Internet Explorer) support to this property perfectly.

Example

Define an id name at styling area and declared its styling properties in properties declaration block.

CSS Code
#bdemo{
    width: auto;
    height: auto;
 }

Insert declared css id selector in a web element through id attribute and; assume, it holds some content.

HTML Code
<body>

  <div id="bdemo"> This is a text content, inserted or used here in a web element for
   demonstrating how to use background-image property and also understands you how it
    works for different values in web browsers. </div>

</body>

It displays the content in web browser as per the specified styling properties.

value: none

According to theory of background-image property, it displays nothing as background of element due to default value none. So, no need to declare background-image property by setting it to none in properties declaration block of element at styling area. In other words, element does not display any image as background in most cases even you specify this property with none value or ignore it. For this reason, most of css web designers neglect it to include in element's properties because it's unnecessary in styling code.

However, it must be specified with value none in some rare cases. If an element was already set to background in an external css document, the same element displays the background image wherever you use it in that website because of css document connection. In such cases, css background-image property must be declared with value none.

CSS Code
#bdemo{
    width: auto;    
    height: auto;
    background-image: none;    
 }

Setting value none to this property understands element to disable the previous styling instruction and it displays element without background image. Except in these types of cases, no need to use it with none value.

value: url

CSS background-image property only can display the image as background of the element when you specify the URL of the image using url( ) as value. The image set as background to element is appeared repeatedly only if width of the element is higher than width of the image.

CSS Code
#bdemo{
    width: auto;    
    height: auto;
    background-image: url(image.jpg);    
 }

Upload an image file to site and insert the URL of the image file as value of css background-image property using url( ) in properties declaration block at styling section. It makes element to display the specified image file as background.

Output in Web Browser
This is a text content, inserted or used here in a web element for demonstrating how to use background-image property and also understands you how it works for different values in web browsers.

In this example, a pattern is applied to element as background and this small pattern style image appeared behind the text repeatedly.

value: inherit

The value inherit allows CSS background-image property of an element to consider its parent element's value of background image property as its value. It sets whatever value you apply to the parent element as element's property if an element is used in another element. In other words, if parent element's background-image value is set to either none or image, the same value is applied to element's background-image property through inherit.

CSS Code
#bdemo{
    width: auto;    
    height: auto;
    background-image: inherit;    
 }

If element is an independent element (which means, not used within any element), the value inherit to consider the default value none.

CSS background-image property is used by the professional CSS web designers in CSS web designing as demonstrated in above possible cases.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This CSS Concept with Your Friends
Save or Share CSS Concept