Background and Border Property in CSS
Background and Border Property in CSS
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 the 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 is 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
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
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, and make them square or rounded.
Restaurant Website Using HTML And CSS With Source Code
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, and left).
Interest Calculator using HTML, CSS and JavaScript
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.
15+ Amazing HTML CSS Progress Bars [ Demo + Code ]
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 top, right, bottom, 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;
}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).
Thanks For Reading!
