CSS Background always fill all available space

I’ve been trying to do this for absolutely forever – have a background image that always covers the screen, regardless of the size or orientation of the screen, and with no visible space. I finally found out how to do it using nothing but CSS applied to the body, so here it is!


body
{
background-color:#444444;
background: url("/public/img/imageName.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Your handwriting… as a font!

Ever wanted to turn your own handwriting into a font? Well now you can! Its a very simple process (although it might shock you how childish your handwriting is if you are like me)

Simply go to http://www.myscriptfont.com

Download the template file

Screen Shot 2014-01-15 at 09.09.31

Complete it, scan it in greyscale at 300dpi, A4 and then upload, and hey-presto, you have your own font!

On the Mac its really easy to install (just double-click on the downloaded file and then click on the install font button), if you are on Windows its a bit more complicated, but there is a nice tutorial on the PC Pro Blog

You can use your own font on any website you make too, by using CSS3 like so:

@font-face
{
font-family: YourFontName;
src: url(yourfontnameinlowercase.ttf);
}

body
{
font-family: YourFontName;
font-size: 1.2em;
}

NB. Its important that your font file name is all in lowercase otherwise it ¬†won’t work on Internet Explorer. I use size 1.2em as the handwriting font can be a bit on the small side for on-screen reading.

PS. If you hadn’t already realised, provided my CSS3 works on your browser, this post is in my handwriting!

 

CSS set background transparency stop children inheriting

css-logo-w3corg-7587501Its a really major problem, you want the background of one particular div or element to be semi-transparent, but if you set

background-color:#ffffff;
opacity:0.8;

then the child elements (things inside the parent div you have set the transparency on) also have the same level of transparency.

Thankfully with CSS 3 there is an easy fix for this that works in all major browsers:

background-color: rgba(255,255,255,0.8);

This then only sets transparency on the actual div that has this style applied to it, and not its children.

One problem with this approach is that it is not completely backwards compatible (thanks to @AlanStirling for pointing this out along with a link to a solution)

http://css-tricks.com/rgba-browser-support/