Automatische Größenänderung Hintergrundbild

Diskutiere mit über: Automatische Größenänderung Hintergrundbild im Web Page Design Forum

  1. DariaBoy001

    DariaBoy001 Thread Starter MacUser Mitglied

    Beiträge:
    119
    Zustimmungen:
    1
    Registriert seit:
    03.11.2003
    Hi,
    bisher dachte ich immer das es nicht möglich ist ein Hintergrundbild einer Website automatish in der Größe anpassen zu lassen. Normal ist es ja so, das bei einer Website das Bild im Hintergrund entweder gekachelt oder mit Rand angezeigt wird. Jetzt habe ich aber auf Madonna.com gesehen das es doch anders möglich ist. Ich habe schon gesehen das es über JavaScript gelöst wird. Kennt jemand eine Quelle für ein solches Script oder weiß wie es geht??
    Gruss Benni
     
  2. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    856
    Registriert seit:
    18.03.2004
  3. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    856
    Registriert seit:
    18.03.2004
    ups...

    ...ist wohl eher das hier: function findDimensions ()

    siehe: http://www.madonna.com/js/madonna.js
     
  4. DariaBoy001

    DariaBoy001 Thread Starter MacUser Mitglied

    Beiträge:
    119
    Zustimmungen:
    1
    Registriert seit:
    03.11.2003
    Danke für die Info, aber ich das ist nicht das was ich suche. Ich habe einen Ansatz gefunden, der allerdings etwass älter ist und mit dem Firefox und Safari nicht klarkommen. Zu sehen unter Funkpalast . Das Problem scheint zu sein das dass Script davon ausgeht das es nur IE und Netscape 4 gibt. Opera und IE funktionieren auch mit dem Script. Ich vermute das es an dem Punkt -> NS4 = (document.layers); liegt. Firefox (Safari wahrscheinlich auch) verlangt aber denke ich (document.getElementById); Habe aber noch keinen Erfolg gehabt beim umstricken des Scripts. Hast du eine Idee?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Unbenanntes Dokument</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript1.2" type="text/javascript">
    <!--
        NS4 = (document.layers);
        IE4 = (document.all);
        
        scaleWidth = true;
        scaleHeight = true;
        imSRC = "images/bg.jpg";
    
        if (NS4) window.onload = setResize;
    
        function setResize(){
            setTimeout("window.onresize=reDo;",500);
        }
    
        function reDo(){
            window.location.reload()
        }
    
        if (IE4) window.onresize = reDoIE;
    
        function reDoIE(){
            imBG.width = document.body.clientWidth;
            imBG.height = document.body.clientHeight;
        }
    
        function makeIm() {
        
          winWid = (NS4) ? innerWidth : document.body.clientWidth;
          winHgt = (NS4) ? innerHeight : document.body.clientHeight;
        
          imStr = "<DIV ID=elBGim"
          + " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
          + "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
          if (scaleWidth) imStr += " WIDTH=" + winWid;
          if (scaleHeight) imStr += " HEIGHT=" + winHgt;
          imStr += "></DIV>";
        
          document.write(imStr);
        
        }
    //-->
    </script>
    </head>
    
    <body marginheight="0" marginwidth="0">
    <script language="JavaScript1.2" type="text/javascript">
    <!--
        makeIm();
    //-->
    </script>
    </body>
    </html>
    
     
    Zuletzt von einem Moderator bearbeitet: 24.10.2015
  5. DariaBoy001

    DariaBoy001 Thread Starter MacUser Mitglied

    Beiträge:
    119
    Zustimmungen:
    1
    Registriert seit:
    03.11.2003
    Ups das war ich eben am Schreiben als du geantwortet hast :)
    Ich schau mir das nochmal an aber eben hab ich das Script von Madonna nicht verstanden. Ich hab gar nicht rausbekommen wo das Bild überhaupt geladen wird...
     
  6. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    856
    Registriert seit:
    18.03.2004
    ...tja, die css & js der madonna-site sind wirklich "heftig".

    Code:
    <div ID="background"><img
        ID="background_image"
        ALT=""
        WIDTH=1 HEIGHT=1 SRC="images/placeholder.gif"></div>
    
    http://www.madonna.com/up_images/BACKGROUNDS//background1-bg.jpg
    ...background2-bg.jpg
    ...background3-bg.jpg
    ...usw.
    Code:
     // if there's valid info, update the globals so they can be used elsehere
        pageWidth = frameWidth;
        pageHeight = frameHeight;
    
        if ( (obj = myGetElementById('background')) )
        {
    	obj.style.width = frameWidth;
    	obj.style.height = frameHeight;
        }
    
        if ( (obj = myGetElementById('background_image')) )
        {
    	var iWidth = obj.width; 
    	var iHeight = obj.height;
    	var iRatio = iWidth / iHeight;
    	var fRatio = frameWidth / frameHeight;	
    
    	// reset to default position on resize/load
    	obj.style.top = obj.style.left = 0;
    
    	if ( iRatio < fRatio ) 
    	{
    	    obj.style.width = frameWidth;
    	    obj.style.height = frameWidth / iRatio;
    	} 
    	else 
    	{
    	    obj.style.height = frameHeight;
    	    obj.style.width = frameHeight * iRatio;
    	}
        }
    }
    
    ...ja, so ganz klar ist das nicht, wo die background_images reingeladen werden...kopfkratz
     
  7. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    856
    Registriert seit:
    18.03.2004
    *hehehe* :D

    ...auch schön:
    Code:
        // update the background, javacript, panel positions and history
        // if needed (only on main content page)
        if ( id == MAIN_CONTENT )
        {
    	updateBackground (id);
    	updateJavascript (id);
    	updatePanelPosition (id);
    	historyPush (id, area, anchorId, scrollDiv, thisHistoryPos);
        }
    
        // look for any objects that need to be minimized
        // this is *not* the most efficient, so it should be
        // redone at some point to be a lot better. right now
        // it looks through all children of the currently loaded content id
        // for DIV's that have the "auto_minimize" attribute set to true
        var contentObj = myGetElementById (id);
        for ( var o = contentObj.firstChild; o; o = o.nextSibling )
        {
    	if ( o.nodeName != "DIV" ) continue;
    //	debug ("Checking " +o.getAttribute('id') + " for auto_minimize");
    	if ( o.getAttribute("auto_minimize") == "true" )
    	    minimizePanel (o.getAttribute('id'));
        }
    
    ...aus: /madonna.js
     
  8. DariaBoy001

    DariaBoy001 Thread Starter MacUser Mitglied

    Beiträge:
    119
    Zustimmungen:
    1
    Registriert seit:
    03.11.2003
    Oy!
    Manchmal braucht man Stunden für die einfachsten Sachen :D

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>FUNKPALAST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    
    <body leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0"><img src="images/bg.jpg" width="100%" height="100%" class="background" />
    </body>
    </html> 
    Und in die styles.css:
    Code:
     .background {
    position:absolute;
    left:0;
    top:0;
    z:-2;
    } 
    Wahnsinn! Total simpel und ich habe die ganze Zeit total kompliziert über JavaScript und so weiter nachgedacht.
     
  9. Difool

    Difool Frontend Admin

    Beiträge:
    8.142
    Medien:
    29
    Zustimmungen:
    856
    Registriert seit:
    18.03.2004
    Sehr cool.

    bin da gerade am testen deines codes; Safari entblösst hemmungslos scrollbalken
    und Firefox "machts" da nur mit der Breite.
    Der IE 5.2.3 unter OS X spielt allerdings glänzend mit. :D

    edit:
    Dafür schafft die madonna.com es nicht mit dem IE 5.2.3/mac... :p
     
  10. DariaBoy001

    DariaBoy001 Thread Starter MacUser Mitglied

    Beiträge:
    119
    Zustimmungen:
    1
    Registriert seit:
    03.11.2003
    Schau mal hier:
    TestJ
    Da ist der Code eingebaut und verbessert, funktioniert mit allen Browsern perfekt, außer... IE Win :(
    Ich glaube ich habe mit diesem Code einen neuen IE Bug gefunden, kann keine Referenz zu diesem Problem finden. Das Problem ist das IE Win das Bild nach unten in die Länge zieht. Erst wenn das Fenster in der Größe verändert wird passt es. Das heißt das er ein Problem mit diesem CSS Befehl hat. Hier der aktuelle, saubere Code (geht auch durch die W3C Validatoren für CSS und HTML)

    Der HTML Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Unbenanntes Dokument</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script language="JavaScript" type="text/javascript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body>  
    <div id="Funkpalast"><img src="images/funkpalast.gif" alt="FUNKPALAST Logo" width="301" height="63" /><br />
    <img src="images/musik.gif" width="116" height="30" alt="Musik" /><br />
    <img src="images/film.gif" width="89" height="34" alt="Film" /><br />
    <img src="images/impressum.gif" width="199" height="27" alt="Impressum" /></div> 
    <img src="images/bg.jpg" alt="Background Image" width="100%" height="100%" class="background" />
    </body>
    </html> 
    Das JavaScript ist nur für den Layer Bug in einigen Netscape 4 Versionen da, kann also auch weggelassen werden.

    Der CSS Code:

    Code:
    body { 
    margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
    }
    .background {
    position:absolute; left:0; top:0; z-index:0; 
    }
    #Funkpalast {
    position:absolute; width:268px; height:179px; z-index:1; left: 9px; top: 9px;
    } 
    Gruss Benni

    PS: Wenn du eine Idee hast für den IE Bug, immer her damit. Habe schon verschiedene CSS Hacks versucht aber noch keine Lösung gefunden.
     
    Zuletzt von einem Moderator bearbeitet: 24.10.2015
Die Seite wird geladen...
Ähnliche Themen - Automatische Größenänderung Hintergrundbild Forum Datum
automatische Umwandlung einer fla Datei mit Swiffy Web Page Design 30.11.2011
Hintergrundbild nur horizontal kacheln mit iweb 09 Web Page Design 18.07.2010
Hintergrundbild der Vorlage geht verloren?! Web Page Design 05.12.2009
Automatische Sicherungsdatei in Smultron abschalten. Wie? Web Page Design 21.08.2008
Div mit Hintergrundbild Web Page Design 04.06.2007

Diese Seite empfehlen

Benutzerdefinierte Suche