-->

Latest Post Toneysoft blog:

Post Title : Web Design tutorial CSS Part-6

Posted By : Unknown

Category: CSS Web Design Web Development

Rating : 100% based on 10 ratings. 10 user reviews.
| Post views: Viewed

– Written of 0 great posts on TONEYSOFT-BLOG.

Item Reviewed: Web Design tutorial CSS Part-6 9 out of 10 based on 10 ratings. 9 user reviews.

Web Design tutorial CSS Part-6

Like the Post? Do share with your Friends.

Web Design tutorial CSS Part-6

css

CSS - Background

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element −

The background-color property is used to set the background color of an element.
The background-image property is used to set the background image of an element.
The background-repeat property is used to control the repetition of an image in the background.
The background-position property is used to control the position of an image in the background.
The background-attachment property is used to control the scrolling of an image in the background.
The background property is used as a shorthand to specify a number of other background properties.

Set the Background Color

Following is the example which demonstrates how to set the background color for an element.

<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      This text has a yellow background color.</p>
   </body>
   </head>
<html>

It will produce the following result −

Set the Background Image

We can set the background image by calling local stored images as shown below

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
      <body>
         <h1>Hello World!</h1>
      </body>
   </head>
<html>

It will produce the following result −

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

The following example which demonstrates how to repeat the background image vertically.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −

The following example demonstrates how to repeat the background image horizontally.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −

Set the Background Image Position

The following example demonstrates how to set the background image position 100 pixels away from the left side.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −

The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −

Set the Background Attachment

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

The following example demonstrates how to set the fixed background image.

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
      
   </head>
   <body>
   
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      
   </body>
</html>

It will produce the following result −

The following example demonstrates how to set the scrolling background image.

<!DOCTYPE html>
<html>
   <head>
   
      <style>
         body  {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }.
      </style>
      
   </head>
   <body>
   
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      
   </body>
</html>

It will produce the following result −

Shorthand Property

You can use the background property to set all the background properties at once. For example −

<p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

Related Posts Widget

Author image

Admin Msg: Md. Xamil Hassan

Now time, to know about technology, and show yourself what you can you do and what is your qualification. write blog. because. A blog writer's thinking and discovering a new technology can create.

Follow me on:

Posted By: Unknown	Post View: Unknown

0 Comments

Disqus

Fb Comments

Comments :

No comments:

Post a Comment

Copyright © 2015 Toneysoft Blog All Right Reserved

^