Usually any webpage that has been created is with a white background by default unless until we provide some styling to it.like background color,background image,border-,any pattern or transparent backgrounds etc.
HTML background styling can be provide in any of the ways :-
a)External style-sheet
b)Internal style-sheet
c)Inline style-sheet
Here's the type of background styling which you can use to make your webpage different from that by default white background.
1.Background Colors:-
Background-color is an attribute used to provide color in the background of any of the html elements like table,body,div etc.
Color code can be given with color name,color hex value or rgb values and if we want to provide any color with opacity then we use rgba values.
Syntax:-
<tagname style="background-color:color-value;"> /Inline style/
tagname{background-color:color-value;} /Internal or Externak style/
Example:-
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<style type="text/css">
body{background-color: pink;}
table,th,td{background-color: white;}
</style>
</head>
<body>
<table>
<caption>info</caption>
<tr>
<th>name</th>
<th colspan="2">age and qualification</th>
</tr>
<tr>
<td>ayush</td>
<td>20</td>
<td>b.com</td>
</tr>
<tr>
<td>bikki</td>
<td>21</td>
<td>b.a</td>
</tr>
<tr>
<td>chinky</td>
<td>22</td>
<td>b.tech</td>
</tr>
</table>
</body>
</html>
2.Background-Image:-
Background-Image is an attribute used to provide an image in the background of any of the html elements like table,body,div etc.
Syntax:-
<tagname background-image="Image URL"> /Inline style/
tagname{background-image:url("Image URL");} /Internal or External style/
Example:-
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<style type="text/css">
body{background-image: url("image.jpg");}
table,th,td{background-image: ("white.jpg");}
</style>
</head>
<body>
<table>
<caption>info</caption>
<tr>
<th>name</th>
<th colspan="2">age and qualification</th>
</tr>
<tr>
<td>ayush</td>
<td>20</td>
<td>b.com</td>
</tr>
<tr>
<td>bikki</td>
<td>21</td>
<td>b.a</td>
</tr>
<tr>
<td>chinky</td>
<td>22</td>
<td>b.tech</td>
</tr>
</table>
</body>
</html>
0 Comment(s)