Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Hintergrundbild einbinden

    sgei

    • Fördermitglied
    • Beiträge: 327
    • Geschlecht:
    Hintergrundbild einbinden
    am: 24. März 2009, 19:08:14
    Hallo,

    ich stehe gerade auf dem Schlauch...

    Ich möchte hinter den Shop ein Hintergrundbild einbinden, dass automatisch auf die aktuelle Browserbreite skaliert wird.

    Wenn ich das Hintergrundbild für den body-Tag ändere sehe ich zwar mein Bild, kann aber die Größe nicht ändern.

    Code: CSS  [Auswählen]
    body {
            font-family:"Trebuchet MS", Verdana, Arial, Sans-serif;
            font-size:13px;
            margin:20px 0;
            padding:0;
            background-image:url(img/bg.gif);
            background-color:#FFFFFF;
    }
     
    Hat jemand einen schnellen Rat?

    Danke.

    Steffen



    Linkback: https://www.modified-shop.org/forum/index.php?topic=493.0

    jonnyB

    • Fördermitglied
    • Beiträge: 519
    • Geschlecht:
    Hintergrundbild einbinden
    Antwort #1 am: 24. März 2009, 19:50:21
    du hast auch keine möglichkeit das bg_image per css an die breite automatisch anzupassen ( meines wissens)

    die möglichkeit die ich sehe ist, vorher ne browser-breiten abfrage zu machen und diesen wert dann auf das bg_image per script zu übertragen.

    Anonym

    • Gast
    Hintergrundbild einbinden
    Antwort #2 am: 24. März 2009, 20:20:52
    Das geht nur mit einem DIV den Du hinter den Shop legst.

    Tipp ist hier position: absolute oder relative und z-index.

    Das Bild muss dann eine seperate Klasse haben z.B


    Code: CSS  [Auswählen]
    .bg img { width:100%; height:auto; }

    Anonym

    • Gast
    Hintergrundbild einbinden
    Antwort #3 am: 24. März 2009, 20:26:31
    Hab mal eben was gecodet.

    Code: PHP  [Auswählen]
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    html, body {
            height:100%;
    }
    body {
            margin:0;
    }
    #bg {
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            height:100%
    }
    #bg img {
            width:100%;
            height:100%;
    }
    #shop {
            position:relative;
            width:950px;
            height:500px;
            margin:0 auto;
            z-index:2;
    }
    </style>
    </head>
    <body>
    <div id="bg"><img src="DEIN-BILD.jpg" /></div>
    <div id="shop">HIER IST DER SHOP</div>
    </body>
    </html>

    sgei

    • Fördermitglied
    • Beiträge: 327
    • Geschlecht:
    Hintergrundbild einbinden
    Antwort #4 am: 24. März 2009, 20:37:31
    Hallo Christian,

    war nach deier ersten Antwort gerade am probieren, da kam schon deine zweite...

    Danke für den super-schnellen Support.

    Ich versuche das mal bei mir umzusetzen.

    Steffen

    Anonym

    • Gast
    Hintergrundbild einbinden
    Antwort #5 am: 24. März 2009, 22:42:12
    Ja dann hau mal rein und ich will den Link sehen, wenn Du es drin hast. ;-)))))

    sgei

    • Fördermitglied
    • Beiträge: 327
    • Geschlecht:
    Hintergrundbild einbinden
    Antwort #6 am: 25. März 2009, 10:21:59
    Hallo Christian,

    ich habe die notwendigen Änderungen mal in meinen Testshop eingebaut, jedoch macht Firefox ein paar Probleme: www.service-oase.de/testshop1

    Folgendes habe ich gemacht:

    Änderungen an der stylesheet.css:

    Code: PHP  [Auswählen]
    /* START Steffen */
    html, body {
            height:100%;
    }
    #bg {
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            height:100%
    }
    #bg img {
            width:100%;
            height:100%;
    }
    /* ENDE Steffen */
    body {
            font-family:"Trebuchet MS", Verdana, Arial, Sans-serif;
            font-size:13px;
            /* margin:20px 0; */
            margin:0px 0;
            padding:0;
            /* background-image:url(img/bg.gif); */
            /* background-color:#FFFFFF; */
    }
    /* WHOLE SITE WRAPPER */
    #wrap {
            position:relative;
            z-index:2;
            margin: 0 auto;
            width:950px;
            /* background-color:#fff; */
            /* border-style:solid; */
            /* border-color:#fff; */
            /* border-width:0px 10px 0px 10px; */
    }
    /* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
    #header {
            height:115px;
            background: #666 url("img/bg_header.gif") repeat-x;
            border-bottom: 1px solid #fff;
            /* border-top: 10px solid #fff; */
            margin-top:20px;
    }
    /* BREADCRUMB PATH AS LIST */
    #breadcrumb {
            clear:both;
            color:#c64934;
            padding:1px 0px 10px 15px;
            list-style-type:none;
            /* background-color:#fff; */
            height:22px;
            background-image:url(img/bg_breadcrumb.gif);
            background-repeat:repeat-x;
            font-size:11px;
    }
     
    Änderungen der index.html im Templateordner:

    Code: PHP  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="index"}
    <div id="bg"><img src="{$tpl_path}img/sonnenuntergang.jpg" /></div>
    <div id="wrap">
        <div id="header">
     
    Der Internetexplorer (IE7) stellt es korrekt dar:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Der Firefox will irgendwie nicht so recht:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Weiss jemand was der FF nicht mag?

    Steffen

    sgei

    • Fördermitglied
    • Beiträge: 327
    • Geschlecht:
    Hintergrundbild einbinden
    Antwort #7 am: 25. März 2009, 10:36:58
    Hallo,

    habe den Fehler gefunden:

    Der DIV-Container für das Hintergrundbild muss explizit auch auf width:100%; gesetzt werden.

    Code: PHP  [Auswählen]
    #bg {
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            width:100%;
            height:100%
    }
     
    Steffen

    2 Antworten
    2920 Aufrufe
    12. Februar 2014, 16:26:01 von Sebescen
    1 Antworten
    1652 Aufrufe
    07. Mai 2015, 15:40:25 von h-h-h
    5 Antworten
    3243 Aufrufe
    05. Mai 2015, 11:24:11 von awids
    11 Antworten
    13909 Aufrufe
    08. August 2012, 11:15:24 von Riesling12