Understanding CSS Background

CSS background is a CSS property used to characterize the background effects on any element. HTML elements are affected by five CSS background properties:

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

CSS background-color

The CSS background-color property helps to determine the background color of the element. You can set the background color as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2,p{  
    background-color: #b13bb3;  
}  
</style>  
</head>  
<body>  
<h2>My first background setup</h2>  
<p>Hello This is my example of CSS background color.</p>  
</body>  
</html>

CSS background-image

The CSS background image is a property used to make an image for the background of any element. Automatically, the image tends to cover the entire element. However, any image intended to be uploaded must rhyme with the text color to avoid unreadable designs. The example below is how you can set your background image

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
background-image: url("composable.jpg");  
margin-left:50px;  
}  
</style>  
</head>  
<body>  
<h1>Hello Humans</h1>  
</body>  
</html>

CSS background-repeat

The CSS background-image property usually duplicates the background image horizontally and vertically. The image duplicated horizontally gives a better look.

background-repeat: repeat-x;
<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient-bg-png-transparent-png.png");  
    background-repeat: repeat-x;  
}  
</style>  
</head>  
<body>  
<h1>Hello Humans</h1>  
</body>  
</html>
background-repeat: repeat-y;
<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-image: url("gradient-bg-png-transparent-png.png");  
    background-repeat: repeat-y;  
}  
</style>  
</head>  
<body>  
<h1>Hello Humans</h1>  
</body>  
</html>

CSS Background Attachment

The CSS background-attachment is a property used to determine if the background image is fixed or will move with the rest of the page in the browser window. If the background image is set to be fixed, then the image will not move when scrolled in the browser window. Below is an example of a fixed background image.

background: white url(‘png-clipart-rubber-duck-rubber-duck.png');  
background-repeat: no-repeat;  
background-attachment: fixed;

The CSS background-position is a property used to characterize the first position of the background image. Automatically, the background image is on the top-left of the webpage, but you can set it to the following positions:

top
bottom
right
left
center
background: white url('Hello.jpg');  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;

CSS Border

The CSS border is a property used to create and arrange the border on any element.

The CSS border is used to select the style, the color, and the size of the border of any element. The CSS border has properties of its own. These properties are listed as follows; border-style, border-color, border-width, border-radius

CSS Border Style

The CSS border style property helps to select which border type you want displaying on the web page.
Some border-style values are used with border-style property to characterize a border.


Below are the values and their descriptions.

none
It doesn't characterize any border.

dashed
It characterizes a dashed border.

solid
It characterizes a solid border.

dotted
It characterizes a dotted border.

double
It characterizes two borders wIth the same border-width value.

groove
It characterizes a 3d grooved border, and creates the effect according to border-color value.

ridge
It characterizes a 3d ridged border and creates the effect according to border-color value.

inset
It characterizes a 3d inset border and creates the effect according to border-color value.

outset
It characterizes a 3d outset border and the effect is created according to border-color value.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.none {border-style: none;}  
p.dotted {border-style: dotted;}  
p.dashed {border-style: dashed;}  
p.solid {border-style: solid;}  
p.double {border-style: double;}  
p.groove {border-style: groove;}  
p.ridge {border-style: ridge;}  
p.inset {border-style: inset;}  
p.outset {border-style: outset;}  
p.hidden {border-style: hidden;}  
</style>  
</head>  
<body>  
<p class="none">No border.</p>  
<p class="dotted">A dotted border.</p>  
<p class="dashed">A dashed border.</p>  
<p class="solid">A solid border.</p>  
<p class="double">A double border.</p>  
<p class="groove">A groove border.</p>  
<p class="ridge">A ridge border.</p>  
<p class="inset">An inset border.</p>  
<p class="outset">An outset border.</p>  
<p class="hidden">A hidden border.</p>  
</body>  
</html>

CSS Border Width

The CSS border-width property is used to create or arrange the width of the border and is set in pixels. The predefined values such as thin, medium or thick can also be used to set the width of the border. The border-width property is usually not used alone but used with other border properties like "border-style".

Example;

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.one {  
    border-style: solid;  
    border-width: 10px;  
}  
p.two {  
    border-style: solid;  
    border-width: thin;  
}  
p.three {  
    border-style: solid;  
    border-width: 5px;  
}  
</style>  
</head>  
<body>  
<p class="one">Say hello to David.</p>  
<p class="two">Hello humans.</p>  
<p class="three">Good morning world.</p>  
</body>  
</html>

CSS Border Color

  1. Name: It uses the color name. For example: "pink".
  2. RGB: It uses the RGB value of the color. For example: "rgb(0,255,0)".
  3. Hex: It uses the hex value of the color. For example: "#00FF00"

There is a border color known as "transparent". If the border color is not set, by default, it is inherited from the color property of the element.
Example;

next
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.one {  
    border-style: solid;  
    border-color: green;  
}  
p.two {  
    border-style: solid;  
    border-color: #2532e8;  
}   
</style>  
</head>  
<body>  
<p class="one">This is a solid green border</p>  
<p class="two">This is a solid blue border</p>  
</body>  
</html>