Testing HTML5 & CSS3

Background Size Property

< div id=" intro">
< section id=" introtext">

< header>< h2>Heading Content< /h2>< /header> < !-- H2 nested in header tag-->

< p> Paragraph content goes here< /p>

< /section> < !--end of nested section-->
< /div> < !--end of intro element-->

As you can see, the markup for the introduction is pretty simple: A section with a heading and a paragraph of text. However, we'll use some new CSS3 tricks to make it look more appealing.

We are using two new properties. The first one is background-size property, which allows you to scale the background-image. In our case, we scale it to 100% on both axes.

If the new intro element expands as we add more content to it, via the header and paragraph elements nested inside it, the background image will stretch to fill the intro element. This is something that was not possible in CSS 2.1 without non-semantic markup and miscellaneous browser issues. The style will look something like this;

#intro{
....
background-size: 100%;
....
}

As illustrated by clicking between our first two pages, Home and Page Layout, the Background Image for the Intro expands and contracts along with the container as content is added or removed. Note that it is exactly the same Image, it has just stretched to fill the space.

Unfortunately, neither this nor the following property border-radius are fully implemented into the major browsers. You can get excellent results in the Google Chrome Browser and we can get some support by using vendor-specific attributes. There's an example of one for the background-size property in the Opera Browser in line one of the example below, however it's not apearing to work at present! Great.

-o-background-size: 100%;
background: #94bf11 url("Assets/intro_flowerTEST.png") no-repeat;

Since we define an additional background-color in line two above, there will be no major problems in browsers that don't support background-size, such as Firefox, thou it wont look quite as nice as it could do! We can style the heading and the text within "intro" just as we always have.

Border-radius Property

The second new property is border-radius, which applies rounded corners to the element. The radius of our rounded corners are 22px in every corner. You could specify different values for each corner or choose to only round individual corners. The style will look something like this;
#intro{
....
border-radius: 22px;
....
}

The border-radius property has also been put to action for the individual sections of the aside element. The only browser that's supporting these styles in the aside sections is Chrome at present. To get a brief intoduction to the new aside element click here . To see how its coded within the page structure and styled click here.

Second Background Images

Unfortunately, no browser reliably supports this at present, but have a look at the exapmle below to see what it would look like.

The flower image is added easily by giving #intro a second background image, something that CSS3 supports. We be able to give the two background images explicit dimensions to ensure that they don't overlap, and we're set. Note the shorthand notation of background-size.

At present this page has only one image set to background as I can't get reliable results in any browser!

#intro {
...
background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top rightright (653px 100%) no-repeat;
...
}

If you look at the intro section using the Mozilla browser you will be able to see the image in its original dimensions as the browser does not support the image size something. The color selected in the previous declaration of the background selector fills in the rest of the intro element.