Category: CSS

Eine weit verbreitete Methode zur Erstellung transparenter Inhalte mit der Hilfe von CSS ist die folgende:

filter:alpha(opacity=80); /* IE */
 opacity:0.8; /* allgemein */
 -moz-opacity:0.8; /* Mozilla */
 -khtml-opacity:0.8; /* KTHML */
 -opera-opacity:0.8; /* Opera */

durch dieses Verfahren werden allerdings ebenfalls die Kindelemente des jeweiligen Bereiches betroffen.

Die Lösung habe ich im Blog von Robert Nyman gefunden:
Original Artikel auf Englisch  

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
 background: rgba(0, 0, 0, 0.6);
 /* For IE 5.5 - 7*/
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
 /* For IE 8*/
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Ein Bild beliebiger Größe soll zu jeder Zeit seitenfüllend dargestellt werden.
Inspiriert von Chris Coyiers Artikel (Perfect Full Page Background Image)

Variante 1: CSS3

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Unterstützt von:

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

Variante 2: CSS

img.bg {  /* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /*Specific to this particular image */
img.bg { left: 50%; margin-left: -512px; /* 50% */ }
}

Unterstützt von:

  • Any version of good browsers: Safari / Chrome / Opera / Firefox
  • IE 6: Borked – but probably fixable if you use some kind of fixed positioning shim
  • IE 7/8: Mostly works, doesn’t center at small sizes but fills screen fine
  • IE 9: Works

Variante 3: CSS

<div id="bg">
<img src="images/bg.jpg" alt="">
</div>


#bg {

position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;

}

#bg img {

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;

}

Unterstützt von:

  • Safari / Chrome / Firefox
  • IE 8+
  • Opera

Variante 4: jQuery

<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) &lt; aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Unterstützt von:

  • IE7+ (could probably get in IE6 with a fixed position shim)
  • Most any other desktop browser