<input type="radio" id="red" name="color" value="red">
<input type="radio" id="blue" name="color" value="blue">
<input type="radio" id="green" name="color" value="green">
<input type="radio" id="default" name="color" value="default">
<label for="red" onclick="saveTheme('red')">IMG 1</label>
<label for="blue" onclick="saveTheme('blue')">IMG 2</label>
<label for="green" onclick="saveTheme('green')">IMG 3</label>
<label for="default" onclick="saveTheme('default')">IMG 4</label>
<header></header>
 
<style type="text/css">
 
 
  
  #global-news-box-wrap, .topnavigation_wrap, #global-news-li, .dwn, #topnavigation-ul.topnavigation, .global-news-link {z-index:1000000 !important;}
  
   /* Höhe des Headers definieren */
  header  {
    max-height: ???px !important;
}
 
/* Header in die Kopfleiste legen */
header { 
    position:absolute; 
    top:50px; /* standard 33px, mit Newsticker 55px */
    left:4%; 
    width:???%; 
    min-height:???px;
    z-index:1;
}
 
/* Höhe der Kopfleiste definieren */
#obere_leiste .usercontent {
    min-height: ???px;
}
 
 
  header {
          -moz-background-size:100% 100%; /* Firefox */
	      -webkit-background-size:100% 100%; /* Safari, Chrome */
	      background-size:100% 100%; /* Opera, IE, W3C Standard */
          display:flex;
	      align-items:center;
	      justify-content:center;
          text-align:center;
          font-size:40px;
          font-family:verdana, sans-serif;
          color:#222;
          text-shadow:4px 4px 4px rgba(20,20,20,0.4);   
          -moz-margin-top:-20px;
          -webkit-margin-top:-20px;
          margin-top:-20px;
          height:200px;
    	  
 
    
}
 
 
  #red, #blue, #green, #default {display:none !important;}
 
 
 
 
  label { position: relative !important; 
    	float: left !important;
  		top:???px !important;
    	left:???px !important;
    	
    	margin-right:8px;
    	padding:4px 10px;
        color:#ddd;
    	z-index:9999999;
		border-radius:4px;
        box-shadow:2px 2px 2px;}
 
 
 
 
label[for="red"] {background-image: linear-gradient(to left, rgba(200,0,0,0.6), rgba(100,0,0,1));}
label[for="blue"] {background-image: linear-gradient(to left, rgba(0,0,200,0.6), rgba(0,0,100,1));}
label[for="green"] {background-image: linear-gradient(to left, rgba(0,200,0,0.6), rgba(0,100,0,1));}
label[for="default"] {background-image: linear-gradient(to bottom, rgba(192,192,192,0.6), rgba(192,192,192,1));}
 
 
/* Styles if Red is checked */
input[id="red"]:checked ~ header {background-image:url(Bild eins); background-repeat:no-repeat;}
 
 
/* Styles if Blue is checked */
input[id="blue"]:checked ~ header {background-image:url(Bild zwei); background-repeat:no-repeat;}
 
 
/* Styles if Green is checked */
input[id="green"]:checked ~ header {background-image:url(Bild drei); background-repeat:no-repeat;}
 
/* Styles if Green is checked */
input[id="default"]:checked ~ header {background-image:url(Bild vier); background-repeat:no-repeat;}
</style>
 
 
 
<script>
 
  
 
  
  function saveTheme(colorChoice) {
  localStorage.setItem('theme', colorChoice);
}
 
 
 
window.onload = function() {
  var theme = localStorage.getItem('theme');
  if(theme === null) {
    theme = 'default';
  }
  else {
     radiobtn = document.getElementById(theme);
     radiobtn.checked = true;
  }
} 
 
  
 
</script>
<!-- Styleswitcher Header Ende -->