Background & Border Properties

Background Properties:

We have 6 background properties and background is a shorthand for all of those properties.

The 6 background properties are::

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

Lets talk about background color property. It is used to set the background color of html element. It can be set either with background property or background-color as shown in below snippet and check their results in this image.

// First way
h1{
  background: blue;
}

// Second way
h1{
  background-color: green;
}

Secondly, background image property is used to set the background image of html element. It can be set either with background property or background-image as shown in below snippet and check their results in this image.

Just remember, the background will be set with a url function and inside this function we will paste the relative or remote url inside a double/single quote.

And the default behaviour of background image is that once set, it will repeat the images both vertically and horizontally and its placed on top left by default of an html element. Now, repeating images is something we never want, so we have another property to fix that (background-repeat), And its placement can be improved with background-position property.

// First way
h1{
  background: url("/images/lighthouse-image.jpg");
}

// Second way
h1{
  background-image: url("/images/lighthouse-image.jpg");
}

Thirdly, background repeat property is used to avoid the default repeating of background image horizontally and vertically in html element or repeating only horizontally or repeating vertically. It can be set either with background property or background-repeat as shown in below snippet and check their results in this image.

The background-repeat property has many values but most importantly : no-repeat (not repeating horizontally and vertically), repeat-x (repeating only in horizontal direction, x-axis) and repeat-y (repeating only in vertical direction, y-axis)

// First way : combining multiple background properties
h1{
  background: url("/images/lighthouse-image.jpg") no-repeat; // set bg image & avoid repeating together
}

// Second way : combining multiple background properties
h1{
  background: url("/images/lighthouse-image.jpg") repeat-x; // set bg image & repeating horizontally together
}

// third way : combining multiple background properties
h1{
  background: url("/images/lighthouse-image.jpg") repeat-y; // set bg image & repeating vertically together
}

// Alternate way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
}

Next, background attachment property decides whether the background image will be fixed or scroll when we scroll the page. It can be set either with background property or background-attachment as shown in below snippet.

The background-attachment property has many values but most importantly : fixed (bg image will be fixed at its place, when page is scrolled) and scroll (bg image will scroll when page is scrolled).

// First way : combining multiple background properties together
h1{
  background: url("/images/lighthouse-image.jpg") no-repeat fixed; // set bg image & avoid repeating together
}

// Alternate way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Lastly, background position property is used to set the background image position in the html element. It can be set either with background property or background-position as shown in below snippet.

The background-attachment property has many values and we need to understand how this value is set, for ex: defining any position we need x-coordinate and y-coordinate to properly locate it.

So for understanding this we need to understand it with respect to x-coordinate(right/left) and y-coordinate (top/bottom ) if both values are given else if only one value is given then it means center of that edge unless "center" is mentioned.
background-position: x-coordinate y-coordinate

The first way in below snippet, has position as only top, it means the "top center" or center of top edge. and have a look in this image to visually understand this.
The Second way in below snippet, has position as only left, it means the "left center" or center of left edge. and have a look in this image to visually understand this.
The Third way in below snippet is very special, has position as only center, it means the "center center" or center of element(rectangular box). and have a look in this image to visually understand this.
The Fourth way has 2 values meaning x & y coordinate. It has position as 20% 70%, meaning from x axis its 20% and from y axis its 70% of space covered. and have a look in this image to visually understand this.
The Fifth way has 2 values meaning x & y coordinate along with edges value, so little complex but easy to understand. It has position as bottom 48px right 95px, meaning from bottom edge move 48px towards center of element(rectangular box) and from right edge move 95px towards center of element(rectangular box). and have a look in this image to visually understand this.
And same goes for sixth way, except its defined in percentages.

// First way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top;
}

// Second way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
}

// Third way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

// Fourth way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 20% 70%;
}

// Fifth way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom 48px right 95px;
}

// Sixth way
h1{
  background-image: url("/images/lighthouse-image.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right 32% bottom 40%;
}

Border Properties:

Border is the boundry of an html element. We have 3 border properties such as : border-width, border-style and border-color

border-width : Width of border.
border-style : style of border such as solid, dotted etc
border-color : color of border such as black, green, #e23e23, rcb(234,123,543) etc

In short, all three is popularly set with a single border property as: border: 3px solid black,
where border-width : 3px, border-style : solid and border-color : black.

Also we can set border on a particular edge of an html element only and not on all the edges (as it is a rectangular box) like border-right, border-left, border-top and border-bottom.
e.g: border-right: 2px solid black;.

To learn more about borders, you can study here, more on borders.
Also look at the image of borders here. This black color rectangle is the border of html elements.

Prev Next

Table Of Content

Background & Border Properties

Background Properties:

Border Properties: