Get the most out CSS backgrounds
With CSS your life as web developer will be easier. Cascade sheet style has been one of the biggest revolutions of the Web2.0 helping web developers to create more effective web pages easier. The main benefit of using cascade sheet style is that you can have a better sequence of the objects you use in your website and you don’t have to repeat these elements on each page. The only thing you have to do is define these elements in the main page and it automatically will be applied in the pages which have a relation with this main page. In this article we are going to see some examples related to the use of CSS backgrounds. Let’s see some useful examples that will help you to increase the potential of your webpage.
1. How can you set the background color with CSS? Within the common HTML tags you should first establish the style type (text=css). Then configure the rest of the elements related to the background such as color of the header1 and header. The following example is a detailed and simple sample about it. In the HTML tag you must define the specifications of the background within the header tags. Once you do that, every header or paragraph you establish in the body of the current page will take the configuration defined in the header. It will make you work only one time helping you to save time, resources and code lines.
<@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <!-- body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} -->::..WEBSLAVE::..CSS BACKGROUNDS <h1>CSS BACKGROUNDS</h1> <h2>CSS BACKGROUNDS</h2> IT IS A BACKGROUND EXAMPLE </body> </html>
2.Repeating a background image with CSS: The CSS has the
virtue to repeat the process you have done only one time. Once you
evaluate this sample you will be able to know how CSS works for
repeat elements such as images and other kind of objects.
<!-- body { background-image: url('backgroundimage.jpg'); background-repeat: repeat } </style><title>: WEBSLAVE::..CSS BACKGROUNDS</title></head> <body>
3.
Repeating a background image vertically with CSS: Beside
the example presented above, you can also define the position you
want the image appears repeated. For that you can establish the
repetition of a background image in the header of the page, in the
footer, in the center, vertically and horizontally. No matter what
you want with CSS almost everything is possible. In this ultimate
example we are going to show a background image vertically with CSS.
If you examine well the following code you will notice that along
with the sentence “repeat” appear the indicator “-y” what
means that the repetition of this object will appear in the
coordinate “-y”.
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> body { background-image: url('backgroundimage.jpg'); background-repeat: repeat-y } </style><title>: WEBSLAVE::..CSS BACKGROUNDS</title></head> <body> </body> </html>
