By
Support for HTML5 video is almost ubiquitous now and we can start to fully explore all that this offers to us as designers. This issue we are using video as a background element for a page design.
As you may be aware, CSS doesn’t allow you to add video as a background element so we have to add a little CSS to make this a fixed element in the background of the design. This offers some opportunities to use a variety of textures, gradients and text effects over the top of the video, which will allow the video to form interesting breaks between sections of the page.
This effect is perfect for one-page websites, as video takes a while to load, what with it being considerably larger than an image background. By adding it to a one-page website you will only need to load it once for your site – that said, it should cache after the first load.
The video also provides interesting background for quotes or other content that you want to draw attention to, as it will have a motion background behind it. The effect works best when there is subtle movement in the background, but we’ve added quite a fast-moving background to draw emphasis to what we are doing.
Start the project
From the resource CD, copy the Start Folder to your desktop and open the file ‘index.html’ in a code editor. In the head section, add the two lines of code shown below. These add a ‘normalize’ stylesheet for resetting all elements for cross-platform display and the Google font that we will use in the design of the menu.
001 <link href=”normalize.css” rel=”stylesheet” type=”text/css”/> 002 <link href=’http://fonts.googleapis.com/ css?family=Amaranth:400,700’ rel=’stylesheet’ type=’text/css’>
Add the video
As you will see, the index page already has some content in there. We are primarily concerned in this tutorial with adding visual effects and styling using CSS. However, we need to add our video to the body of the page, so add the code below immediately after the opening body tag. After adding this, your page will merely have video placed at the top of the document.
001 <video autoplay loop> 002 <source src=”loop.mp4” type=”video/mp4”> 003 <source src=”loop.webm” type=”video/ webm”> 004 <source src=”loop.ogv” type=”video/ogg”> 005 </video>
CSS to the rescue
First we need to just set up the headings and body content to have the correct typeface and colours. Move back into the head section of the document and add the CSS style tags. All the code for the rest of the tutorial will be placed before the closing style tag.
001 <style>
002 h1, h2, h3, h4, a { color: #636; font-
family: ‘Amaranth’, sans-serif;}
003 body {
004 color: #555;
005 font-family: “HelveticaNeue-Light”,
“Helvetica Neue Light”, “Helvetica Neue”,
Helvetica, Arial, “Lucida Grande”, sans-serif;
006 background: url(images/bg.jpg) #000 no- repeat center center fixed;
007
008 -webkit-background-size: cover;
009 }
010
011 </style>
Video background
With the following code shown below, we turn the video into a background by fixing the video into position. The video is positioned in the top-left corner of the browser; we also set the video to fill the browser with the minimum width and height settings and move the video behind any other content with the z index. Refresh your browser so you can see this in action.
001 video{
002 position:fixed;
003 left:0;top:0;
004 min-width:100%;
005 min-height:100%;
006 width:auto;
007 height:auto;
008 z-index:-100;
009 visibility: visible;
010 }
011
Style the logo
We are now going to create our logo, which will be designed entirely using CSS. The first part of this is to set the width and height of the logo. We set this to be centred on the page and also make the border radius 50%, which turns the <div> into a circle. In order to see this, we need to add a background image, which is semi-transparent stripes, allowing the video to be seen behind.
001 #logo{
002 width: 320px; height: 320px;
003 margin: 80px auto;
004 padding: 20px;
005 text-align: center;
006 border-radius: 50%;
007 background: url(images/thick_stripe.
png);
008 }
Vertically centring
We are now going to centre the text vertically. To do this, we need to tell the browser to render the content as a table with a set height and width. Add the code as shown which applies this to the <div> with the id of ‘vCent’ (short for vertical centre).
001 #vCent{
002 display: table;
003 height: 320px; width: 320px;
004 overflow: hidden;
005 }
Vertically centred
The previous step doesn’t completely solve the problem of the vertical centring, however, because we have just set it to behave like a table. Now we tell the content inside, which is the heading 1 tag, to act like a table cell. This now allows us to add a vertical align of ‘middle’ to this and we get the look that we are trying to achieve. Refresh your browser to see it in action.
001 #vCent h1{
002 font-family: ‘Amaranth’, sans-serif;
003 display: table-cell; vertical-align:
middle;
004 font-size:5em;
005 letter-spacing:.02em;
006 line-height: .8em;
007 color: #636;
008 }
009
Create the strapline
Underneath the logo we plan to have a strapline that tells people exactly what the ‘VDO’ site is and who it represents. The strapline class sets up the typeface to stand out against the background, but what will also help is if we put a tiled image that is transparent in the background. We add an ‘x’ pattern as a transparent PNG.
001 .strapline{
002 padding: 20px 0;
003 color: #fff;
004 font-size: 2.5em;
005 font-family: ‘Amaranth’, sans-serif;
006 }
Centre the text
Now our text is really beginning to stand out against the background, we just need to centre the text on the screen. By having this as a separate class, we can add it several times to other dominant text so that it becomes reusable in other contexts. Add the code shown and refresh your browser to see the result.
001 .cntr{
002 margin: 0 auto;
003 width: 95%;
004 max-width: 960px;
005 line-height: 1.6em;
006 }
Side view
We are now going to put more emphasis on the text by adding a borderline at the top and bottom of the text – this also has the added appeal of increasing the space around the text. By doing this we get to add an extra padding at the bottom of the line, which will help to keep this content separate from what comes next.
001 .lines{
002 border-top: 2px solid #fff;
003 border-bottom: 2px solid #fff;
004 padding-bottom: 10px;
005 }
Readable text
One of the main problems with the design of the page is that all the content is largely unreadable because of the video in the background, so we will address this now by making a class called ‘white’. This will create visible text with a white background colour. While we will not be able to see the video, we can use this to create visually interesting video spacers between sections.
001 .white{
002 background: #fff;
003 padding: 40px 0;
004 }
Style the link
We have added a link for the Creative Commons-sourced video background that we have used, so we need to make that link stand out. Here we add a background colour of purple and change the text colour to white. We also add in a transition property so that we can create our rollover transition as well.
001 a{
002 display:inline-block;
003 color:#fff;
004 text-decoration:none;
005 background: #636;
006 padding:.5rem;
007 transition:.3s background;
008 }
009
Rollover transition
Here we’re going to add a different colour background for the hover effect in this tutorial. All this involves is changing the background colour to a darker purple, giving the user the impression of more emphasis as they roll over the link. Save your work now and refresh your browser so that you can see all the updates.
001 a:hover{
002 background:#303;
003 }
Horizontal rules
The default look of the horizontal rule harks back to when interfaces had a chiselled-edge look. This doesn’t look that great now, so we make the rule 1px high with a plain colour. This gives the horizontal rule a better look.
001 hr {
002 height:1px;
003 background-color:#ddd;
004 border:none;
005 }
Rule of thirds
We are going to style the text that appears further down the page into three columns, so we add the third class as shown here. When any content is floated to the left, the next content doesn’t sit in the right position unless it clears the floated content. This is solved by creating the class ‘clearfix’, so it clears the other content.
001 .third{
002 float: left;
003 width: 30%;
004 padding: 0 1.5%;
005 }
006 .clearfix{ clear: both; }
Create spaces
In this step we will add a space between the initial intro text and the ‘About’ section of the design. This adds an interesting space for the video to show through and this can be used to surprise the user with the video background. By not allowing the entire video to show through, it creates good visual interest.
001 .spacer { min-height: 240px; }
002 .dark_bg { background:rgba(0,0,0,0.5); }
003 .smll { font-size: 0.8em;
004 color: rgba(255,255,255,0.5);
005 }
Fold it up
In our previous step we also created a dark space with a semi-transparent black background for the quote. Now all we do is add a responsive class for the images and also add a small space between other sections of content. Preview this in your browser to see the sections starting to be more clearly defined.
001 .respond {
002 max-width: 100%;
003 }
004 .small_spacer { min-height: 120px; }
Click the cube
Now we add a background that incorporates an image and a semi-transparent gradient, as this still allows the video to show through slightly. Whatever is the first element in the background will be the top-most background – in this case it’s the gradient. We are only adding the WebKit prefix for brevity.
001 .thin_bg{
002 background: -webkit-
gradient(linear, left top, left bottom,
color-stop(0%,rgba(55,55,55,0.9)),
color-stop(80%,rgba(55,55,55,0)),color-
stop(100%,rgba(55,55,55,0.3))), url(images/
thin_stripe.png);
003 }
Fix the image
Here we are adding just a small fix to make the image float to the right. We are also scaling the image down so that it will fit comfortably into small-screen browser windows. This is a good use of the space and allows other graphics not to take over with having such bold areas of visual interest elsewhere.
001 .about-img
002 {
003 max-width: 360px;
004 display: block;
005 float: right;
006 }
Dark gaps
Further down the page we are going to add another gradient into the space just before the footer section. The footer will be darker, so we’ll position the gradient to get darker at the bottom. We also combine the gradient once again with an image tile – but this time the image is a repeating dot pattern.
001 .dark2_bg {
002 background: -webkit-gradient(linear,
left top, left bottom, color-
stop(20%,rgba(45,45,45,0)), color-
stop(100%,rgba(45,45,45,0.8))), url(images/dot.
png);;
003 }
Add the footer
The last part of the general code is to add the styles for the footer. The footer features a darker-coloured background, so the text has to be lighter over the top of this to be more visible. As a result, we’ve added styles for the paragraph and heading 2 tag to be lighter. Save the document and preview in your browser.
001 .dark{
002 background: #222;
003 padding: 40px 0;
004 }
005 .dark p, .dark h2{
006 color: #999;
007 }
008
Final step
The final element we need to add is the changing of the sizes of various elements when being viewed on a smaller screen. Here we also turn off the visibility of the video element because some mobile browsers bring the video to front before allowing it to play, so it’s safer to just remove it. Save and test for the final time – and that’s it!
001 @media screen and (max-width: 768px) {
002 video{ visibility:hidden;}
003 #logo{width: 200px; height: 200px;
margin: 30px auto;}
004 #vCent{width: 200px; height: 200px;}
005 #vCent h1{font-size:3em;}
006 .strapline{font-size:2em;}
007 }
