HTML-Background
Html – background
The HTML characteristic utilized to locate pictures in the background of HTML features is HTML background. Background like the bgcolor characteristic is now belittled and its usage has been relocated via utilizing CSS . However, this lesson does cover some important facets of background features that do apply to both the belittled HTML background and the new CSS backgrounds as well.
We generally have just two alternatives while think of an HTML background: a solid background color or a background image. With the growth and shrinkage of the HTML feature which are involved in the backgrounds of both the background color and image grow or flinching dynamically.
HTML Background Image Code:
|
1 2 3 4 |
<table height="100" width="150" background="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/happy1.jpg" > <tr><td>This table has a background image</td></tr> </table> |
We indicated predetermined height and width characteristics that matched the aspects of the image we utilized in the background of the table feature in the first instance. Everything seems ok. If we supplement more content to the table itself and this feature’s height enhances in size, we will run into problems. In order to fill in the stretched regions the image starts to repeat itself, which may seem impressive.
Html – background repeat
HTML Repeating Background Image:
|
1 2 3 4 |
<table height="300" width="160" background="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/happy1.jpg" > <tr><td>This table has a background image</td></tr> </table> |
More often than not, this behavior leads more trouble than help, and we as web designers, have two alternatives. We can either remain with it (until comprehending how to squelch it with CSS code) or, via thinking outside the box utilize this behavior to our assist.
Html – transparent background images
We mentioned that .gif and .png image kinds can be stored with clearance and integrated into HTML pages in the HTML Images lesson. We can produce HTML features with semi-transparent background colors that can be utilized to produce overlay effects for our web pages by doing so.
Through photo editing software clearance can be supplemented to any image, and if you don’t presently have such software installed.
Let’s now locate another background image within a table as we did in the previous example, but this time, let’s utilize an image that’s a little bit better-suited for a background. This one has a small amount of clearance.
Transparent Background Images:
|
1 2 3 4 5 6 |
<table height="159" width="318" background="h<a data-mce-href="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/wheather.png" href="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/wheather.png">ttp://htmlfreecodes.com/blog/wp-content/uploads/2017/01/wheather.png</a>" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> |
We’ve created a semi-transparent (.png) file to utilize as the background of the table as the code shows. Doing so enables the color from this web page to glow through the image, shading it blue.
Html – background repeat revisited
We can take our last example a step further and produce a very nice effect called a gradient overlay now that we are more familiar with clear HTML backgrounds. We’re going to take advantage of the recurring behavior of HTML background images and produce a clear gradient image file that is the same width as the target image (400 pixels), but only 1 pixel tall in order to meet this aim.
Gradient Overlay Example:
|
1 2 3 4 5 6 7 8 9 10 11 |
<table height="400" width="400" background="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/weather.png" cellspacing="0" cellpadding="0"> <tr> <td> <table height="400"width="400" background="http://htmlfreecodes.com/blog/wp-content/uploads/2017/01/weather.png"> <tr> <td></td> </tr> </table> </td> </tr> </table> |
The gradient image we have offered is 480 pixels wide and only 1 pixel tall. We’ve two reasons in doing so. Although the image is only 1 pixel tall, the web browser keeps on to repeat this image limitlessly, or for the whole height specified utilizing the height characteristic (163 pixels in this case). Moreover, decreasing the size of the image to 1 pixel in height dramatically decreases the file size and will greatly make better page performance.