CSS Backgrounds



CSS Backgrounds play an major role in the visual presentation of web Document.

The CSS background properties are

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

CSS Background Color

The background-color property is used to add the background color of an HTML element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Setting background-color of an Element in CSS</title>
<style>
	body {
		background-color: lightblue;
    }
    h1 {
        background-color: red;
    }
</style>
</head>
<body>
    <h1>Background Color</h1>
    <p>paragraph content</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.

CSS Background Image

The background-image property is used to add an background image of an HTML Document.

Example

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>background-image in CSS</title>
    <style>
        body {
            background-image: url("code.png");
        }
    </style>
    </head>
    <body>
        <h1>Background Image</h1>
        <p>paragraphcontent</p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS Background-Position

The background-position is used to add the position of the background image.

Example

<!DOCTYPE html>
<html>
<head>
<title> background-position of Images in CSS</title>
<style>  
    body {
        background-image: url("code.png");
        background-repeat: no-repeat;
        background-position: 100% top;
    }
    
</style>
</head>
<body>
    <h1>Background Position Demo</h1>
    <p>paragraph content</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.

CSS Background-repeat

The background-repeat is used to control background image is repeatd on the background.

Example

<!DOCTYPE html>
    <html>
    <head>
    <title> Horizontal background-repeat in CSS</title>
    <style>
        body {
            background-image: url("code.png");
            background-repeat: repeat-x;
        }
    </style>
    </head>
    <body>
        <h1>Background Repeat Demo</h1>
        <p>pragraph content</p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS Background-attachment

The background-attachment is used to fix an background-image.

Example

<!DOCTYPE html>
<html>
<head>
<title>Fixing background-attachment in CSS</title>
<style>
    body {        
        background-image: url("code.png");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
</style>
</head>
<body>
    <h1>Background Attachment Demo</h1>
    <p>paragraph Content</p>
</body>
</html> 


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units