Posted on

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;
}

Posted on

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/