I have not been doing web design for that long but in the time that I have my mind has been filled with break tags and divs. I have learned HTML and CSS basically from scratch outside of knowing how to write a <b>bold</b> tag on MySpace. I have created websites in Photoshop, taken them to Dreamweaver and sliced them up, and typed line after line of code building what you see when you type Google into your address bar. Unless you are a web designer or know one on a first name basis, you have no idea the work that has to go into building a website. I will spare you the speech on the entire web design process, as I want to focus on one particular facet of the design process with you here today.
CSS allows for us to place background images on our pages. Currently you only have the ability to place one background image on any particular containing element. You can also refer to a containing element as a div as you would write the code to look something like below.
<div id=”example”>
<p>Hello world.</p>
</div>
That is strict HTML but when you head to the style sheet you will begin playing with a whole new set of constraints. Below is an example of how you would put a background color on the div you see above you.
#example {
background-color: #EFEFEF;
}
That would put a light gray background on the default spacing of the container, which would be 100% of the width and the height of the letters that sit inside of it. You can then go a step further by putting a height or width on the div itself to add a level of design to the element. It gets very confusing and you can become overwhelmed very easily. I have been doing it for over a year now and I get consumed every day of the week.
But CSS is about to release what they have coined as CSS3 (an original name if I have ever heard one) and will begin allowing for multiple background images. Imagine the possibilities of multiple background images on the same containing element. Oh the joy that overcomes me! But the reason that brings me here today is to tell you a little bit about some of the changes you can expect with the introduction of CSS3.
Outside of the fact that you are now going to be able to use multiple images, you will also be able to use what they are calling background clip. This will come in handy for those IE users out there (and if you use IE please stop right now, go download Firefox or some other modern age browser, and come back) as it will allow the background image to take 100% of the container that it sits in. Not a big deal to most of you, but in IE 6 and 7 (not IE8 which is now an available upgrade) the background image would have some default padding around all its edges. Therefore if you wanted a background image to take up an entire area you would have to hack it to allow full exposure. But you will not have this problem anymore with the optional background clip.
Speaking of the area in which the background can be seen, you will not have the option of using the background size call. So let’s say that you have a box that is 200px by 200px but you only want your background image to take up 100px by 100px of that space. No more will you have to open Photoshop and resize and resave that image as you can call that right in the CSS style sheet. Pretty cool stuff, I know.
There are also new calls for background repeat and background color that will give an almost layering effect to the designer. You can read more about all of these online on various websites that discuss the various changes as they are not limited to only backgrounds. It is a very exciting time in the web design world as we are seeing progression, and sometimes forced progression making our work better and allowing fewer folks the option of using IE. One day we will live in a world where I do not have to spend a week testing a site in every browser known to man. But don’t hold your breath, as HTML5 and CSS3 will take years before they make their way into every day and accepted testable use.
