CoderShot

Rate this post

Table of Contents

CSS Backgrounds

In CSS, the “background” property provides a shortcut for simultaneously setting several background-related properties.

The “background” layer of elements in HTML can be customized using the CSS background set of attributes in Cascading Style Sheets, or CSS. This comprises adjusting colors, pictures, gradients, and other effects that appear to improve a webpage’s appearance and design.

Backgrounds of elements are set using CSS backgrounds. It’s employed to specify the backdrop effects of single-line items. Many properties are available for background design.

You can give HTML components different background styles using CSS (Cascading Style Sheets).

Syntax:
css selector{
    background: bgColor bgImageUrl bgPosition bgRepeat bgAttachment;
}

In a single declaration, it allows you to specify ‘background-color', ‘background-image‘, ‘background-position', ‘background-size‘, ‘background-repeat', ‘background-origin‘, ‘background-clip', and ‘background-attachment' values.

CSS Background Properties

To add background effects to elements, utilize the following CSS background properties.

Background propertyDescription
CSS Background-color propertyIn CSS, the background-color property is used to define an element’s background color.
CSS Background-image propertyIn CSS, by using the background-image property, One or more background pictures can be assigned to an element.
CSS Background-repeat propertyIn CSS, by using the background-repeat property, the background picture can be repeated both vertically and horizontally.
CSS Background-attachment propertyIn CSS, the background-attachment property is used to define the type of connection of the background picture to its container.
CSS Background-position propertyThe body-position property in CSS is mostly used to position images.
CSS Background-origin propertyA feature defined in CSS called background-origin helps in modifying the webpage’s background picture.
CSS Background-clip propertyIn CSS, the background-clip property specifies how to expand the backdrop (color or image) inside of an element.
One shortcut property in CSS is the Background.

CSS Background Property With Examples

1. CSS Background-color property: The element’s background color is specified by background-color property.

The most common way to specify a color in CSS is:

  • A real color name, such as “red”
  • an RGB value such as “rgb(255,0,0)”
  • a HEX value such as “#ff0000”

The element’s padding and border are included in the background, but the margin is left off. For the user, it makes reading the content quite simple.

Syntax:
element {
   background-color: color name;
}

Default value: The default value is Transparent.

Example:
<!DOCTYPE html>
<html>

<head>
    <title> CSS Background-color Property</title>
    <style>
        body {
            text-align: center;
            background-color: skyblue;
        }

        h1 {
            color: white;
            background-color: palevioletred;
        }

        h3 {
            color: white;
            background-color: orange;
        }
    </style>
</head>

<body>
    <h1>CODERSHOT </h1>
    <h3>background-color: color_name;</h3>
</body>

</html>
Output:

2. CSS Background-image property: The background picture for an element can be specified using the background-images property.

By default, the image is repeated to occupy up every element.

Syntax:
body {
  background-image: url("link");
}
Example:
<!DOCTYPE html> 
<html> 
<head> 

	<style> 
		body { 
			background-image: url("codershot.png"); 
		} 
        h1{
            color: white;
            text-align: center;
        }
	</style> 
</head> 

<body> 
	<h1>CODERSHOT</h1> 
    
</body> 
</html>
Output:

3. CSS Background-repeat property: The background-repeat property in CSS is used to control how background images are repeated within an element.

By default, the image is repeated vertically and horizontally by the background image property.

Syntax: To horizontally repeat an image
element {
   background-image:link;
   background-repeat: repeat:x;
}
Example:
<!DOCTYPE html> 
<html> 
<head> 
	<style> 
		body { 
			background-image: url("codershot.png"); 
			background-repeat: repeat-x; 
		} 
        h1{
            color: white;
            text-align: center;
        }
	</style> 
</head> 

<body> 
	<h1>"Hello Coders"</h1> 
</body> 
</html>
Output:

Note*: Set background-repeat to repeat an image vertically: repeat-y;

4. CSS Background-attachment property: The background-attachment property determines whether the background picture should be fixed or scrollable(won’t scroll with the page as a whole).

Syntax:
background-attachment: scroll| fixed| local| initial| inherit;
Example:
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS Background-attachment property
    </title>

    <style>
        #content {
            background-image: url("codershot.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
        body{
            text-align: center;
            background-color: lightblue;
            color: blue;
        }
        h1{
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>CODERSHOT</h1>
    <h2> background-attachment: scroll;</h2>
    <br><br>
    <div id="content">
        <p>
            At Codershot, we are passionate about being the best.
             We aim for excellence in every part of our platform,
             from the skills of our courses to the knowledge of our instructors. 
             At Codershot, we are passionate about being the best.
             We aim for excellence in every part of our platform,
             from the skills of our courses to the knowledge of our instructors. 
        </p>
        <br>
        <br>
        <p>
            We embrace innovation as a driving force behind progress. 
            We stay at the forefront of the ever-evolving tech industry by 
            continuously exploring new technologies, trends, and best practices.
            We embrace innovation as a driving force behind progress. 
            We stay at the forefront of the ever-evolving tech industry by 
            continuously exploring new technologies, trends, and best practices.
        </p>
        <br>
        <br>
        <p>
            Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.
             Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.
             Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.
        </p>
        <br>
        <br>
        <p>
            We understand the value of teamwork and the power of collective knowledge. We believe that by working together, we can achieve more and make a greater impact. Join us and be part of a supportive community that thrives on collaboration.
            We understand the value of teamwork and the power of collective knowledge. We believe that by working together, we can achieve more and make a greater impact. Join us and be part of a supportive community that thrives on collaboration.
            We understand the value of teamwork and the power of collective knowledge. We believe that by working together, we can achieve more and make a greater impact. Join us and be part of a supportive community that thrives on collaboration.
        </p>
        <br>
        <br>
        <p>
            At my online education platform, we are committed to helping students unlock their coding potential. Through carefully curated courses and interactive learning experiences, we aim to bridge the gap between theory and practice. Our goal is to equip students with practical skills that can be applied in real-world scenarios, preparing them for success in the rapidly evolving tech industry.
            At my online education platform, we are committed to helping students unlock their coding potential. Through carefully curated courses and interactive learning experiences, we aim to bridge the gap between theory and practice. Our goal is to equip students with practical skills that can be applied in real-world scenarios, preparing them for success in the rapidly evolving tech industry.
        
        </p>

    </div>
</body>
</html>
Output:

5. CSS Background-position property: The background image’s initial position inside its container can be set using background-position property.

You can use lengths, percentages, and keywords to determine the position.

Property Value:

  • background-position: left top;
  • background-position: left bottom; 
  • background-position: left center;
  • background-position: center top; 
  • background-position: center center;
  • background-position: center bottom;
  • background-position: right top; 
  • background-position: right center;
  • background-position: right bottom; 

NOTE*: In the x%y% notation, the horizontal position is represented by x%, and the vertical position is represented by y%, relative to the initial position, or left top. For example : background-position: 25% 75%;

NOTE*: The pixel or any additional CSS unit can be used to express the units in x-pos and y-pos notation. For example: background-position: 30px 80px;

Syntax:
element{
          background-position: value;
          }
Example:
<!DOCTYPE html>
<html>
<head>
	<title> CSS Background-position Property </title>
	<style>
	body {
		background-image: url("codershot.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: left center;
        background-color: lightblue;
	}
	</style>
</head>

</html>
Output:

6. CSS Background-origin property: The exact position of the background picture is specified by the CSS background-origin property.

It finds the backdrop(background) image’s origin position, the origin of the background image is set by default to be in the top-left region of the screen or webpage.

Property Value:

  • initial : The background-origin is set to the padding edges in the top left corner, which is the initial/default value.
  • padding-box: By using this property, the padding edges in the top-left corner can be used as the background image’s origin.
  • border-box: This parameter is used to align the image with the top left corner of the webpage, or the borders of the webpage’s body.
  • content-box: This property, wherever it appears, is used to set the background’s origin based on the text of the division or body.
  • inherit: It functions as a padding box by default and is used to inherit properties from previously used code (parent property).
Syntax:
element{
            background-origin: padding-box| border-box| content-box| initial|
            inherit;
             }
Example:
<!DOCTYPE html>
<html>
<head>
    <title> CSS Background-origin property</title>
    <style>
        
        #coders{
            padding: 40px;
            width: 400px;
            background-image: url('codershot.png');
            background-repeat: no-repeat;
            background-origin: initial;
            border: 2px double;
            text-align: justify;
            color: white;
        }
    </style>
</head>

<body>
    <div id="coders">
        <p>
            Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.
             Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.
             Our courses are designed to empower you with the latest
             tools and knowledge needed to innovate and create.We understand 
             the value of teamwork and the power of collective knowledge. 
             We believe that by working together, we can achieve more and
              make a greater impact. Join us and be part of a supportive 
              community that thrives on collaboration.
        </p>
    </div>
</body>
</html>
Output:

7. CSS Background-clip property: The CSS background-clip property indicates the width of the background color or image within an element. It determines whether the background is visible through the border or only inside the content or padding area.

Property Value:

  • border-box: The division’s backdrop color can be set using the border-box attribute.
  • padding-box: The background within the border is set using the padding-box property.
  • content-box: To set the backdrop color to the content only, use the content-box attribute.
  • initial: This is the setting by default. The background color of the entire division is set using it.
Syntax:
element{
            background-clip: padding-box| border-box| content-box| text| initial|
            inherit;
             }
Example:
<!DOCTYPE html>
<html>
<head>
    <title>CSS Background-clip property</title>
    <style>
        #coders {
            background-color: lightblue;
            background-clip: border-box;
            text-align: center;
            border: 10px dashed black;
        }
    </style>
</head>

<body>
    <div id="coders">
        <h1>
            CODERSHOT
        </h1>
        <h2>cracking the code</h2>
        <p>
            background-clip: border-box;
        </p>
    </div>
</body>
</html>
Output:

Supported Browsers For CSS Background Properties:

  • Google Chrome 1.0 and above
  • Microsoft Edge 12.0 and above
  • Internet Explorer 9.0 and above
  • Firefox 4.0 and above
  • Opera 10.5 and above
  • Safari 14.0 and above

READ ALSO : A simple calculator in C

0 0 votes
Course Rating

Share:

More Posts

Send Us A Message

7 Applications of Machine Learning VS Deep Learning in real life scenarios

7 Applications of Machine Learning VS Deep Learning in real life scenarios

Suppose you’re thinking about pursuing a career in the IT sector. In that case, you’ve probably heard of data science, …

Read more

A Simple Calculator in C: Understanding Basic Operations

A Simple Calculator in C: Understanding Basic Operations

In the world of programming, creating a calculator or menu-driven program is a rite of passage for many beginners. It’s …

Read more

Swapping Variables in C: A Beginner’s Guide

Swapping Variables in C: A Beginner’s Guide

In the world of programming, the need of swapping variables is a common occurrence. Whether you’re working on a simple …

Read more

0
Would love your thoughts, please comment.x
()
x