Bild per CSS einfügen (Programmieren)

Bild per CSS einfügen (Programmieren)

Hoi

ich habe folgendes Problem:
Ich will einen Styleswitcher einbauen, mit dem man zwischen den CSS dateien wechseln kann, ich will es aber etwas ertweitern und würde gerne den Header meiner Homepage auch dabei auswechseln lassen.
Wie schaffe ich das? Ist es möglich, meinen Header per CSS einzufügen?
normalerweise geht der Code für das einfügen eines Bildes doch mit

background-image:url(img/bild.jpg);

aber der browser zeigt es trotzdem nicht an.
kann mir da jemand helfen?

LG
TimSly
Das Element mit dem Hintergundbild sollte natürlich die selben Ausmaße wie das Bild haben (width, height) - bzw. mindestens diese Ausmaße (dann aber Wiederholungen und Ausrichtung des Hintergrundbildes via background-repeat und background-position anpassen)

Deinem Hilfegesuch mangelt es übrigens an Umfang und Ausführlichkeit...
Dass das Bild so groß sein sollte, ist mir schon klar.
und ausführlicher? gerne.

Das hier ist das Script, das ich einbauen will, das Problem ist einfach nur, dass man damit nur zwischen den CSS Dateien hin und herschaltet.

<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
<link rel="alternate stylesheet" type="text/css" href="style4.css" title="style4" />
<script type="text/javascript" src="styles.js"></script>


das hier ist für den Head Bereich.
und das hier ist die styles.js datei

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);


und zu guter letzt noch die links, um zu switchen

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Default</a>
<a href="#" onclick="setActiveStyleSheet('style2'); return false;">Style 2</a>
<a href="#" onclick="setActiveStyleSheet('style3'); return false;">Style 3</a>
<a href="#" onclick="setActiveStyleSheet('style4'); return false;">Style 4</a>



gut, damit sind die Codes bekannt, mein Problem, wie bereits erwähnt, damit ändert man nur die CSS datei und nicht das Bild, ich bräuchte aber, damit sich der Styleswitcher eben lohnt, auch einen anderen Header.
Ausführlich genug?

LG
Öha. JS ist gar nicht mein Fall. Ich hätte es via PHP mit Sessions + Cookies gelöst.
Sry
Logge dich ein um einen Beitrag zu schreiben.