Scribd
Upload
31 views

CSS Background 4r

The document discusses the 5 CSS background properties - background-color, background-image, background-repeat, background-attachment, and background-position. It provides examples of how each property can be used, including setting background colors, images, repeating images horizontally or vertically, fixing background images during scrolling, and positioning background images.

Uploaded by

apple12zsxx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

CSS Background 4r

The document discusses the 5 CSS background properties - background-color, background-image, background-repeat, background-attachment, and background-position. It provides examples of how each property can be used, including setting background colors, images, repeating images horizontally or vertically, fixing background images during scrolling, and positioning background images.

Uploaded by

apple12zsxx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Background - javatpoint

CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>
14. </html>

Test it Now

Output:

My first CSS page.


Hello Javatpoint. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page like
this.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

Test it Now

Note: The background image should be chosen according to text color. The bad combination of
text and background image may be a cause of poor designed and not readable webpage.

3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

Test it Now

background-repeat: repeat-y;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

Test it Now

4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll
with the rest of the page in browser window. If you set fixed the background image then the
image will not move during scrolling in the browser. Let?s take an example with fixed
background image.

1. background: white url('bbb.gif');


2. background-repeat: no-repeat;
3. background-attachment: fixed;

Test it Now

5) CSS background-position
The background-position property is used to define the initial position of the background image.
By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

1. background: white url('good-morning.jpg');


2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

Test it Now

You might also like