Homepage Hintergrund mit Bild

motsch_ · 3. Dezember 2011

Guten Abend,

ich will bei unserer Caln Homepage (www.silentforce-clan.de) im Hintergerund auf beiden Seiten jeweils einen Soldaten einbauen!
Jedoch ist bei Homepages ja das Problem, dass jeder eine andere Auflösung hat (ja nicht gerade jeder

), und so das Bild oft abgeschnitten wird!

Wie kann ich das lösen?
Also dass das Bild bei allen in der selben Größe angezegit wird (also nicht skaliert wird), und es auch bei allen in der gleichen position zu sehen ist?

Hier habe ich z.B. eine Seite gefunden, wie es ausschauen sollte: http://www.dog-warriors.de/index.php

Mr.Blade · 3. Dezember 2011

Hi,

so müsste es funktionieren, stört aber den Seitenfluss immens:

Code:

<!DOCTYPE html>

<head>
<title>Blabla Dein Seitenname</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}
 
/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}
 
/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          text-align: center;}
 
/* Layoutelemente */
#mainDiv{ width: 600px;
          height: 100px;
          text-align: left;
          margin: 18px auto;}
#headDiv{ border: 1px solid #000;
          background: #efefef;}
#contentDiv{ border: 1px solid #000;
             background: #f0fff0;
             margin-top: 6px;
             height: 1000px;}
#footerDiv{ border: 1px solid #000;
            background: #fffff0;
            margin-top: 6px;}
 //-->
</style>
</head>
<body>
<img id="bgImg" src="hintergrund.jpg" width="100%" height="100%">
<div id="bodyDiv">
  <div id="mainDiv">
    <div id="headDiv">Header-Element</div>
    <div id="contentDiv">Content-Element</div>
    <div id="footerDiv">Footer-Element</div>
  </div>
</div>
</body>
</html>

Gruß

motsch_ · 3. Dezember 2011

In wie fern stört es den Seitenfluss?

Mr.Blade · 3. Dezember 2011

Das Scrolling laggt unschön, bei allen Browsern, wie eben bei dog-warriors.de Ich würde nach 'ner Alternative suchen.

motsch_ · 3. Dezember 2011

was für ne Alternative sollte ich da suchen bzw. wüsstest du eine?

motsch_ · 4. Dezember 2011

push****

unsubtimal · 5. Dezember 2011

Ich versteh' dein Problem nicht ganz.
Auf der von dir verlinkten Seite ist das einfach ein ganz normales Hintergrundbild o.O

Das CSS kann man einfach nachgucken:
background: url("Bilder/bg.png") no-repeat fixed center top #000000;

wobei bg.png hier hin zeigt: http://www.dog-warriors.de/include/designs/DDv5/Bilder/bg.png

Edit: Mr. Blade's Ansatz mag zwar funktionieren, ist aber für den erzeugten Effekt irgendwie Overkill

Suche

Homepage Hintergrund mit Bild

motsch_

Lt. Commander

Mr.Blade

Lieutenant

motsch_

Lt. Commander

Mr.Blade

Lieutenant

motsch_

Lt. Commander

motsch_

Lt. Commander

unsubtimal

Lt. Junior Grade

Ähnliche Themen