Backgrounds in CSS:

To apply backgrounds to the HTML elements in CSS you have many options for it. You can give a color to a background or you can use an image as a background.

Following are some effects that we can use in CSS for backgrounds:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

background-color:

You can set the background color of the HTML element with the “background-color” property of CSS. There are so many colors available for it. You can select any one of them.

Example:

background-image:

You can also set an image as a background for that in CSS you have “background-image” property. By default an image is repeated the entire page.

If you want to write text over an image so you have to use the “URL” property for that. In following example we are using an image as a background and also write some text over it.

Note:

While using  examples  please use an image that is available on your computer.

Example:

background-repeat:

If the image is very small than it will repeat on over the page. But if you don’t want to repeat it than in CSS you have property for that. And also you can repeat the image horizontally and vertically.

You will understand it by example.

Example:

In following example image is repeating all over page.

Example:

In following example image is repeating only horizontally

Example:

In following example image is repeating only vertically

Example:

In following example image is not repeating with no repeat property

background-position:

You can also set the position of an image. Means you can define where to image appear on the browser.

Example:

background-attachment:

The background attachment property in CSS determines whether the background image is fixed or scroll.

Example:

Following example is with fixed background and scroll background image.

 

One response to “Backgrounds in CSS”

  1. Polly Chell says:

    Youre so cool! I dont suppose Ive learn something like this before. So nice to seek out any person with some unique ideas on this subject. realy thank you for starting this up. this website is something that is wanted on the web, someone with a little originality. useful job for bringing one thing new to the internet!

Leave a Reply

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