CSS Background
CSS Background plays an important role to attract more visitor on your website or blog when a Web developer developed website he always tries to create an impressive website.
This is because, if the website is not Looking Good or User interface not the good user is not attracted towards the content of the website.
To create attractive websites, Web developers use color gradients and background images.
because, the web developers have used a different background for paragraphs and heading, banners.
you can easily highlight different section in web pages which attracted the visitors.
similarly, you know, CSS not only helps to you for setting backgrounds of entire web pages, but its also help in adding different colors for the different section in web pages.
suppose that if you want to set the blue color for the entire web pages
and displayed content of a paragraph in the white base color then you can set the white color of the paragraph on a Blue background.
as a result, the CSS Background properties in web developed are used to define or control the background effects for elements.
All CSS Background Properties:
| Property | Description |
|---|---|
| Background-image | the background image for an element to set in the web pages |
| Background-repeat | The sets background image will be repeated in x-axis and y-axis or none |
| background-color | Sets the background color for an element in the web pages |
| background-position | Sets the position of a background image like as top, bottom, left, right |
| Background-attachment | Sets background image scrolls with the rest of the page or fixed |
| background-size | background image size specified for web pages |
| background-clip | the background-clip is used to set Specifies the painting area of a background |
| background-origin | background-origin is used Specifies where the background images are positioned |
Background-image
therefore, Background-image properties developers set background images for web pages, means that which background images you want to set for your web pages, can set easily with the help of CSS Background-image properties.
|
1 2 3 |
body { background-image: url("banner.jpg"); } |
therefore, in the URL given the path of background images, which you want to set a background image.
Background-repeat
Background Repeat properties are used for background images repeat in x-Axis or Y-Axis, means that background-images repeat in Horizontally or Vertically
hence Background-images repeat only in Horizontally, Vertically or both, Horizontally Represent X-axis Direction and Vertically Represent Y-Axis Direction.
|
1 2 3 4 5 |
body { background-image: url("banner.png"); background-repeat: repeat-x; background-repeat: repeat-y; } |
|
1 2 3 4 |
body { background-image: url("banner.png"); background-repeat: no-repeat; } |
Here, above all example, if you want to repeat background in X-Axis direction, uses repeat-x, or in Y-Axis Direction used repeat-y background-repeat Properties.
background-repeat: no-repeat; properties used in that condition when you don’t set background-repeat.
background-color
hence, in Web Development background-color property is used to set the background color of an element for web pages.
furthermore, with the help of background-color properties, we can set background-color for web pages section or on hole web pages.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { background-color: grey; } h1 { background-color: blue; } div { background-color: brown; } p { background-color: green; } |
consequently, In the above background-color example you can write the color name or color code to decorate your web pages.
like as a color name – like “green” , HEX value – “#efefef”, an RGB value – like “rgb(0,0,255)” therefore means that you can use color value in color name or Hexa value or RGB value.
background-position
therefore, Background position properties use to set the position of background Images, therefore, means web developer can set the background position easily used background-position properties,
|
1 2 3 4 5 |
div{ background-image: url("bannerflax.jpg"); background-position: top; background-repeat: repeat-x; } |
|
1 2 3 4 5 |
body { background-image: url("banner.png"); background-position: top; background-repeat: no-repeat; } |
therefore, In background-position properties can set background images in the position, left, right, top, bottom according to our web development need.
Background-attachment
therefore, Background-attachment properties to used attached background images to fixed in web pages used attachment properties to fix the background images position.
|
1 2 3 4 5 6 |
body { background-image: url("img_tree.png"); background-position: top; background-repeat: no-repeat; background-attachment: fixed; } |
About Author
