CSS Background and Border | easy explanation – codewithrandom

CSS Background and Border | easy explanation – codewithrandom

CSS Backgrounds

Elements’ backgrounds can be filled with a color or image, clipped and/or resized, and otherwise be modified.

CSS background properties:

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

Background Color

We can specify a background color for an element using the background-color property.

The value can be any valid CSS Color or CSS3 Color.

Changing the background color of a whole page:

 body {  
background-color: gold;
}

Changing the background color of elements:

 h1 {  
background-color: yellow;
}
p {
background-color: pink;
}
div {
background-color: gray;
width: 200px;
height: 200px;
}

Background Image

The background-image property sets one or more images as background of an element.
The format of its value should be: url(“image.jpg”) . Single quotes and no quotes also work e.g. url(‘image.jpg’) and url(image.jpg)

The text contained in the quotes are file paths.

 body {  
background-image: url("images/clouds-bg.jpg");
}

Note: Don’t use any background color or image that will disturb the text on your web page. Always keep everything readable.

Background Image Repeat

CSS automatically resets background images horizontally and vertically.

Take a look at an example below.

 body {  
background-image: url("images/small-sunflower.png");
}

To only repeat the background image horizontally or vertically we can use the background-repeat property.

Horizontally-repeating background image.

 body {  
background-image: url("images/small-sunflower.png");
background-repeat: repeat-x;
}

Vertically-repeating background image.

 body {  
background-image: url("images/small-sunflower.png");
background-repeat: repeat-y;
}


Background Image – no-repeat

The no-repeat value of the background-repeat property stops a background image from repeating.

 body {  
background-image: url("images/small-sunflower.png");
background-repeat: no-repeat;
}

Background Image – Set Position

We can set the initial position of a background image using the background-position property.

Valid Values

  • top
  • bottom
  • left
  • right
  • center
  • combination of the ones mentioned above (top and bottom and left and right can’t be combined)
  • <percentage>
  • edge offset values
  • inherit
  • initial
  • unset

Background Attachment

The bacground-attachment property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

Valid Values:

  • scroll: background is fixed relative to the element itself and does not scroll with its contents.
  • fixed: background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element.
  • local: background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
  • scroll, local
  • local, scroll

Background – Shorthand Property

We can specify all CSS background properties in one single property using its shorthand property.

The background property is a shorthand for the following CSS properties:

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

Example:

A CSS Background with the following properties…

 body {  
background-color: red;
background-image: url("images/small-sunflower.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

… can be shortened to:

 body {  
background: red url("images/small-sunflower.png") no-repeat fixed top right;
}

Note: You can ommit values. Ommited values will be set to their initial values.

CSS Borders

In CSS, we can decorate borders with lines, make it square or rounded.

Border Style

The border-style CSS property sets the line style for all four sides of an element’s border.

Valid Values:

  • none: displays no border
  • hidden: displays no border
  • dotted: displays a series of rounded dots
  • dashed: displays a series of short square-ended dashes or line segments
  • solid: displays a single, straight, solid line
  • double: displays two straight lines
  • groove: displays a border with a carved appearance
  • ridge: displays a border with an extruded appearance
  • inset: displays a border that makes the element appear embedded
  • outset: displays a border that makes the element appear embossed

Example:-

 p.none { border-style: none; }  
p.hidden { border-style: hidden; }
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; }

Border Width

We can specify the widths of an element’s borders using the border-width CSS property.

Valid Values:

  • thin: displays a thin border
  • medium: displays a medium border
  • thick: displays a thick border
  • <length>

Below is an example of using a <length> value.

Example:-

 div {  
border-width: 10px;
border-style: solid;
width: 250px;
height: 250px;
background: yellow;
}

Border Color

The border-color CSS property defines the color of a border.

Valid Value:

  • <color>    

Example:-

 div {  
border-style: groove;
border-width: 5px;
border-color: magenta;
width: 250px;
height: 250px;
background: yellow;
}

CSS Borders – Individual Sides

In CSS, we can specify border styles, widths and colors on each side (top, right, bottom, left).

We can achieve this by using the following CSS properties.

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

Changing border style on each side example:

 div {  
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: groove;
border-width: 5px;
border-color: red;
width: 250px;
height: 250px;
background: lightgrey;
}

Changing border width on each side example:

 div {  
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;
border-color: red;
border-style: solid;
width: 250px;
height: 250px;
background: lightgrey;
}

Changing border color on each side example:

 div {  
border-top-color: blue;
border-right-color: red;
border-bottom-color: green;
border-left-color: gold;
border-style: solid;
border-width: 5px;
width: 250px;
height: 250px;
background: lightgrey;
}

CSS Border – Shorthand Property

The border CSS property sets an element’s border. It’s a shorthand for the following CSS properties:

  • border-width
  • border-style
  • border-color

As with all shorthand properties, any omitted sub-values will be set to their initial sub-value.

However, in this shorthand property the border-style‘s value is required.

Order does not matter.

Example:-

 {  
border: 1px solid black;
width: 250px;
height: 250px;
background: lightgrey;
}

CSS Borders – Specifying Values

The border-style,border-width and border-color CSS properties can have one, two, three or four values.

One Value

When one value is specified, it applies the same style, width or color to all four sides.

 div {  
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with one value */
#style {
border-style: dashed;
border-width: 10px;
border-color: red;
}
/* border-width with one value */
#width {
border-style: solid;
border-width: 10px;
border-color: red;
}
/* border-color with one value */
#color {
border-style: solid;
border-width: 10px;
border-color: red;
}

Two Values

When two values are specified, the first styles, widths or colors apply to the top and bottom, the second to the left and right.

 div {  
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with two values */
#style {
border-style: dotted dashed;
border-width: 10px;
border-color: red;
}
/* border-width with two values */
#width {
border-style: solid;
border-width: 10px 15px;
border-color: red;
}
/* border-color with two values */
#color {
border-style: solid;
border-width: 10px;
border-color: red green;
}

Three Values

When three values are specified, the first styles, widths or colors apply to the top, the second to the left and right, the third to the bottom.

 div {  
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with three values */
#style {
border-style: groove dotted dashed;
border-width: 10px;
border-color: red;
}
/* border-width with three values */
#width {
border-style: solid;
border-width: 10px 15px 10px;
border-color: red;
}
/* border-color with three values */
#color {
border-style: solid;
border-width: 10px;
border-color: blue red green;
}

Four Values Example:

When four values are specified, the styles, widths or colors apply to the toprightbottom, and left in that order (clockwise) respectively.

 div {  
width: 250px;
height:250px;
background: lightgrey;
margin: 10px;
}
/* border-style with four values */
#style {
border-style: solid dashed solid dashed;
border-width: 10px;
border-color: red;
}
/* border-width with four values */
#width {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
}
/* border-color with four values */
#color {
border-style: solid;
border-width: 10px;
border-color: blue red green gold;
}

Note: The border property increases elements’ outer size except <table> and <td> elements.

For instance, an element with a width and height of 20px and a border of 5px will have an outer width and height of 30px (20px width + 5px border-left-width + 5px border-right-width = 30px outer width).

Check it more :-






Leave a Reply