CSS

CSS Lesson 4: Background and Borders in CSS

In this knowledge bit, we are going to cover background and borders in css which we use to change the background color or the background image of an element and border.

Background and Borders in CSS

 

We are going to start with the background property, we used this property to define the background effects such as background color, background image, background position, here we have a list of the CSS background properties

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

So let’s start with the small example here, you can see we have

CSS

 


body{

background: #376091;

}

div{

background-color: #d0d5ef;

}

HTML

 


<body>

<div>

<p>this is paragraph one</p>

<p>this is paragraph two</p>

</div>

</body>
       

Output

 

Background and Borders in CSS

Background Color

If you want to change your background color, you need to follow these steps:

I am going to change the background color of my site that I have created in last knowledge bit. Let’s give it a light green color.

 

Background and Borders in CSS Example

 

Now make another file and name it whatever you like, I named it “stylefile.css”.

Then to change the color of background we need to select <body>. Now write a code in your CSS file like below.

 

body{

background-color: #b1ffa8;
}

HTML Code

 

<body>

<h1>This is Title</h1>

<h2>This is Sub-heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>
</body>   

 

Here is the output of the changes that we make in our CSS file.

 

JavaScript Lesson: Background in CSS

 

We can change the Paragraph color as well. Now we changing our paragraph color to light grey.

There is updated CSS and HTML code.

 

body{

background-color: #b1ffa8;
}

p{
background-color: #d1d1d1;
}

Output

 

Background Image

We can change the background image as well, as we have seen so many times. The tag would use the URL instead of color.

For this, choose any background from Google and copy its URL, here is the code for changing the background image.

 

body{
background: url(https://images.pexels.com/photos/552791/pexels-photo-552791.jpeg?w=640&h=450&auto=compress&cs=tinysrgb);
}

 

Here is the output of above code, where you can see the background is covered with the image.

 

JavaScript Lesson: Borders in CSS

“Background-repeat: no repeat “ property

We use no-repeat property when the picture in the background is not really big enough and it is repeating (like a tile picture) you can use it to make only single background image. Now we are applying this property to our website.

 

body{

background: url(https://images.pexels.com/photos/552791/pexels-photo-552791.jpeg?w=640&h=450&auto=compress&cs=tinysrgb);

background-repeat: no-repeat;
}

 

In this example we have used the no-repeat property you can see here that the background picture is not repeating like a tile, and you can also see the picture is not stretching out to cover the whole background.

 

 

Now we have set the background of our site and it’s not repeating, but you also notice that it’s not stretching out to cover the entire page. So if I wanted to get it to stretch out across the entire screen or across the entire body there is one another property we can set which is background size and we can set that to cover

“Background Size: cover; ” Property

In order to make a background image wider then we have another property ‘background-size’.

 

body{
background: url(https://images.pexels.com/photos/552791/pexels-photo-552791.jpeg?w=640&h=450&auto=compress&cs=tinysrgb);
background-repeat: no-repeat;
background-size: cover;
}      

 

Here you can see the picture is covering the entire background and the picture is not repeating like a tile.

 

 

So now you can see it now takes up the entire page

Borders in CSS

So a border in CSS allows you to specify the three different parts of any elements.

Parts of Borders in CSS

  • Style
  • Width
  • Color

Border Style

We use the border-style property to specify the style of the border we are going to display. here we can use from one to four values like for the top border, right border, bottom border and left the border.

There are following values which we can be used:

  • dotted – Defines a dotted border
  • dashed – Defines a dashed border
  • solid – Defines a solid border
  • double – Defines a double border
  • groove – Defines a 3D grooved border. The effect depends on the border-color value
  • ridge – Defines a 3D ridged border. The effect depends on the border-color value
  • inset – Defines a 3D inset border. The effect depends on the border-color value
  • outset – Defines a 3D outset border. The effect depends on the border-color value
  • none – Defines no border
  • hidden – Defines a hidden border

Border Width

We use the border-width property to specify the width of the borders.

We can set Border width into specific size (in px, pt, cm, em, etc) or we can also set border width by using three pre-defined values: thin, medium, or thick.

Similar to Border style, we can have from one to four values like for the top border, right border, bottom border and left side of the border.

Border Color

We use Border color property to set the color of borders. We can set the color by name which specifies the color name like red, hex specify a hex value like #ff0000, RGB specifies an RGB value, like “rgb(255,0,0).

Here we also have four values just like similar to other two property for the top border, right border, bottom border, and the left border.

The above three properties use simultaneously like this.

 


body{

background: url(https://images.pexels.com/photos/552791/pexels-photo-552791.jpeg w=640&h=450&auto=compress&cs=tinysrgb);

background-repeat: no-repeat;

background-size: cover;

}

p{

background-color: rgba(124, 124, 124, 0.4);

border-style: dotted;

border-color: rgb(196, 188, 188);

border-width: 5px;

}

h1{

background-color: rgba(186, 0, 0, 0.5);

border-style: dotted;

border-color: rgb(196, 188, 188);

border-width: 5px;

}

h2{

background-color: rgba(109, 235, 249, 0.2);

border-style: dashed;

border-color: rgb(196, 188, 188);

border-width: 8px;

}

 

here we have applied the borders to <h1> heading, <h2> sub-heading and <p> paragraph tags and you can see here in the below output that the border on every text, you can also see that we have used RGB colors in the background of the text.

 

 

In this knowledge bit, we have covered background and borders in css which we used to change the background color or the background image of an element and border. In the next knowledge bit, we are going to learn about selectors basics to-do Lists. Three main basic selectors Element, ID, and Class.

 

You can have a look at our whole JavaScript series as well

Click to comment

Most Popular

To Top