Borders and Background in CSS
Colors and Backgrounds in CSS! , Up to now you have created a HTML index File , some basic styling and so on. You might want to add an awesome background into your Website to make it more presentable and eye catching .
Well lets look into how to add , a back ground Image Step by step by following the Instruction below
- Go to your CSS file , do your styling at there
- Copy the Image that you want to set it as a Background Image into your Root File
- Target the Styling at the body tag.
- Use the Command backgound-image :url (yourbackgroundfilename);
- Use the Command backgorund-repeat:no-repeat; to not repeat the background image
- Set it to Center by using background-size: cover;
Well when selecting a Background , you might want to Select an Image with the correct Size and pixel size . So it will not look blurry when you enlarge the background image to turn it into a Background cover sheet.
The Next Step is to Add Border line into your image
- Copy the Image that you want to insert into your site into the root file.
- Open up your . html file.
- Call the Image by using < img src=”” class=”BorderImage”> give it a Class name.
- Open up your .css file.
- Taget the ” BorderImage ” Class
- Add in the Pixel, Color into your CSS Style.
- Check out the Sample Code below
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="Just another Website.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>This is just Another Website</h1>
<p>
Welcome to Brian Website
</div>
<div class="borderImage">
<img src="flower.jpeg" alt="is a flower" height="100" width="100">
</div>
</body>
</html>
CSS CODE
.container{
background: linear-gradient(to right, #cc99ff ,#ff99ff);
box-shadow: 3px,3px ,3px, black;
}
h1{
color:#e6e6e6;
text-shadow: 2px,2px ,5px,#000000;
}
body{
background-image: url(mountain.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.borderImage{
border-right: 30px solid black;
}
Check out Background gradient in CSS here
Leave a Reply