CSS background property

CSS background property:

You can use CSS to provide excellent all backgrounds in a website. Always a background color should be used, though there is used a background image to, because of the color of the image is more than the load time. So if there is no background color it does not take well at the time of loading.

Tables: CSS background properties:

PropertyValue
background-colorColor (hex, RGBa, HSL, transparent (default)
background-imageurl (image), none (default)
background-repeatRepeat-x, repeat-y, repeat, space, round (default), no-repeat
background-positionTop, left, right, bottom, center
background-attachmentFixed, local, scroll (default)
backgroundA shorthand is used to determine the single syntax multiple background properties

CSS: background-color property

Using these properties the background color can be set on the web page. By default, the background color is transparent. Codes, keywords, and (), etc. even with the combination of these the background color can be made.

Syntax:

Element{background-attachment: <color>| transparent| inherit;}

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
.background{font:1.5em Helvetica, verdana; background-color: green; color: white; 
   
}
</style>
</head>
<body>
<div class="background" width="50%"
<p>HTML is the short form of Hypertext markup language. 
</p>
</div>
</body>
</html>

Display in Browser:

css background property

CSS: background-image property

Using these properties the image can be easily added to the background. It takes two values. Such as:

url(): In the background the image path is determined in the () brackets. For example: /path/image.png

None: there is a background image. It is used as the default value.

Sample coding syntax:

body{background-image: url(image.gif);}
or, div{background-image: url(image/photo.gif)}

Example-1:

HTML Code:

<html>
<head>
<style type="text/css">
div{widht:100%; height: 200px; background-color:#ffffff; background-image: url(css.jpg); color:red;}
</style>
</head>
<body>
<div> The background image example</div>
</body>
</html>

Display in Browser:

css background property image property

 

CSS: background-repeat property:

This property is very important to control repeat automatically of the image in the browser. Otherwise, the screen image browser automatically will repeat on the whole screen. A variety of values are used in these properties. For example-

Sample coding syntax:

body{background: url('socials.png')00 repeat-x;}
body{background: url('socials.png')00 repeat-y;}
body{background: url('socials.png')00 no-repeat;}

Example 1:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("repeat.gif");
    background-repeat: repeat-x}
</style>
</head>
<body>

<p>repeat-x will repeat a background image only Horizontally.</p>

</body>
</html>

Display in Browser:

css background repeat-x propery.

 
Example II: Repeat image inserted vertically.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("repeat.gif");
    background-repeat: repeat-y</style>
</head>
<body>

<p>repeat-y will repeat a background image only vertically.</p>

</body>
</html>

 

Display in Browser:

css background repeat-y property

To determine the position of the background image:

In the web page the position of the image can be set in different ways in the middle, the left-right or up-down.The possible values for position in this property are left / right / center / top / center / bottom. You can use them either single or mixed. Also, using different units with background-position property, the background text or the image can be moved to the position as needed. These units are -%, PX, em, in, cm, mm etc.

The position of the image is determined by the value of one or two, separated by a space (Eg, -5%, 20%), (30px-40px) (top center). If the single value is assigned, then the other value will be:

Declaration format:

background-image: 20%;     	/*valid*/
background-image: 20% 40%;	/*valid*/
background-image: center;    	/*valid*/
background-image: center right;	/*valid*/
background-image: top-center;	/*valid*/
background-image: 20% right;    /*valid*/
Or,
background-position: top or top right/left/bottom/center
background-position: bottom or bottom top/right/left/center
background-position: center or center top/bottom/center
background-position: right or right top/bottom/center
background-position: left or left right top/bottom/center

Syntax:

Element{<percentage>| <length>| left| center| right| bottom| top;

For example:

Set the image on the right side:

HTML Code:

<html>
<head>
<style type="text/css">
body{background-color:#FFCC66;
background-image:url("roni.jpg");
background-repeat: no-repeat;
background-position: right top;}
h1{color:#990000; background-color: #FC9804;}
</style>
</head>
<body>
<h2>Background position right top</h2>
<p>Cascading style sheet or in short css is a style sheet language used for describing the presentation of a document written in html, X HTML and any language such as XML.</p>
</body>
</html>

Display in Browser:

image set up and down

CSS background-attachment property:

This property is used for attachments any image in the background. That means the background of the image in response to scroll through the pages which are set by the property.The possible values are:

Fixed: if the users scroll through web pages, but the background image is fixed.

Scroll: When the user scroll through pages background image will move. The default value is scroll.

Local: Content background image to be fixed. So if you scroll pages with content that will move it.

Syntax:

Element{background-attachment: scroll | fixed | local;}

For example:
For example, web pages stabilize the background image.

HTML Code:

<!doctype html>
<html>
<head>
<style>
body{font-family:verdana, Helvetica, sans-serif;}
p{border:5px ridge #009900; background-image:url(roni.jpg);
background-repeat:no-repeat; height: 130px; width:600px;
overflow-y:scroll; background-attachment:fixed;}
</style>
</head>
<body>
<p>Cascading style sheet or in short css is a style sheet language used for describing the presentation of a document written in html, X HTML and any language such as XML.</p>
</body>
</html>

Display in Browser:

css background attachment property

 

Shorthand CSS background properties:

The shorthand background property is used to determine the single syntax multiple background properties.

Declaration background properties:

background: color/image/repeat/attachment/position

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
.background{background: #00ff00 url("firefox.png") repeat-y fixed center;}
</style>
</head>
<body>
<div class="background">
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</div>
</body>
</html>

Display in Browser:

css background shorthad property

Leave a Reply

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