How to create a background in HTML

Creating an HTML background CSS is a real must. After all webdesign methods have changed throughout the years and tables containing an img element to call up images are surpassed. Let’s suppose you would like to create a website containing a header which covers the complete width of your screens and is about 150px heigh. The header background needs to be flaming red. To realize this background you should first create an HTML element enclosed by body tags like in the following example:

<div class="header">Header contents</div>

Upon completion of the HTML header, a separate stylesheet needs to be created. Please save this sheet as style.css and save it in the folder which also contains the HTML file. This stylesheet should be called up by the html head section. The stylesheet can be called up as follows:

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

Upon completion of the stylesheet and the method to call up the stylesheet, the next step involves  the background header settings. To define the background size you should add a new line in the stylesheet to link the background to the header and to define the right width and height. This is realized as follows:

.header{
background: red;
height: 150px;
width: 100%
}

After saving the stylesheet you will immediately notice your header is covering the complete width of your screen, has a 150px height and has a red background. Mission accomplished!



Was this useful?