• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild das sich bei Zoom nicht verändert?!

B

Bengman

Mitglied
Hey, Ich habe gerade das Problem das dass Hintergrundbild immer kleiner wird, wenn Ich zum Beispiel in die Seite zoome.

Code: 
html, body
       {
        background-image: url(hintergrund.jpg);
        background-repeat: no-repeat;
        background-position: 0% 0%;
       }


Wie kann Ich das so ändern das das Bild immer gleich bleibt?

Vielen Dank schonmal! Lg! :)
 
Hallo,

Wie kann Ich das so ändern das das Bild immer gleich bleibt?
Zum Vergrößern anklicken....

Erst mal in dem du uns mehr Infos gibst.

Wir brauchen den HTML-Quelltext und das Bild.

Weiterhin müssen wir wissen wie groß das Hintergrundbild auf der Seite erscheinen soll.

Und dann, wie es sich verhalten soll, wenn das Breiten-/Höhenverhältnis der Seite anders ist als das des Fensters. Soll das Bild dann verzerren? Oder abgeschnitten werden? Oder sollen Ränder erscheinen?

Zudem ist es ziemlich sinnfrei dem html und dem body gleichzeitig ein Hintergrundbild zu verpassen. Entweder ... oder... .

Die background-position: 0% 0%; kannst du auch weglassen.

Gruss

MrMurphy
 
Ok. Also Ich will einfach das das Bild Im ganzem Hintergrund ist. Egal wie die Seite ausgelegt ist. Eine Backgroundcolor bleib ja auch immer gleich! :)
 
Hallo,

auf Grund deiner dürftigen Infos solltest du dem bereinigten CSS ein

Code: 
background-size: 100% 100%;

hinzufügen.

Gruss

MrMurphy
 
Hallo,

Toll, wenn du meine Fragen nicht beantwortest ist Hilfe natürlich schwer. Und so richtig kommt bei mir auch keine Freude auf, da ich nur raten kann und nicht weiß, was du mit meinen Informationen anfängst.

Hast du das CSS wie von mir vorgeschlagen bereinigt? Hast du dich auf ein Element, am besten body, beschränkt?

Und was ist mit deinem HMTL-Quellcode?

Auf Grund deiner bisherigen Infos und

aber dann sieht man das Bild gar nicht mehr!
Zum Vergrößern anklicken....

(wozu überhaupt das Ausrufezeichen?, das Problem bist doch du selbst)

gehe ich davon aus, das du zu den Spezies gehörst, die mit einem Layout beginnen und noch gar keinen richtigen Quelltext haben.

Das html- und das body-Element werden nur so groß, wie deren Inhalt es erfordert. Schreib' also mal etwas HTML-Quelltext in den body-Bereich, so das Inhalt reinkommt. Dann sollte auch das Hintergrundbild angezeigt werden. Halt so hoch wie der Inhalt ist.

Gruss

MrMurphy
 
Ok. Ich habe den CSS Code "bereinigt". Wozu brauchst du den HTML Code?

Code: 
<!DOCTYPE html>
<html>
<head>
    <title>FloriundLuki</title>
    <meta charset="UTF-8" />
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="Webseite">
<header class="header">
  <div id="navigation">
   <ul>
    <li><a href="index.html"><h3><span id="homepage">Startseite</span></h3></a> | </li>
    <li><a href="#"><h3>G&auml;stebuch</h3></a> | </li>
    <li><a href="#"><h3>Soziale Netzwerke</h3></a> | </li>
    <li><a href="#"><h3>Youtube Partner</h3></a> | </li>
    <li><a href="#"><h3>Forum</h3></a> | </li>
    <li><a href="#"><h3>Minecraft Server</h3></a> | </li>
    <li><a href="#"><h3>TeamSpeak</h3></a> | </li>
    <li><a href="#"><h3>Kontakt</h3></a></li>
    </li>
   </ul>
  </div>
</header>
<nav>

</nav>
<article>
.
</article>
<footer>
.
</footer>
</div>
</body>
</html>

Das Bild:
 

Anhänge

  • background.jpg
    background.jpg
    441,4 KB · Aufrufe: 47
Hallo

Wozu brauchst du den HTML Code?
Zum Vergrößern anklicken....

Um deine Seite möglichst genau nachbauen zu können und so das Problem weiter einzugrenzen.

Ich habe mal eine Textdatei erstellt, die bei mir funktioniert. Du musst nur den gesamten Quelltext in eine html-Datei kopieren und im Browser anschauen.

Das CSS befindet sich in der Datei im head-Bereich. Für die Praxis sollte es natürlich sinnvollerweise in eine CSS-Datei ausgelagert werden. Wenn die Datei bei dir auch funktioniert kannst du die CSS-Angaben ja mit deinen vergleichen. Ich habe mich bemüht nur die notwendigsten Angaben für dein Problem zu benutzen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Hintergrundbild</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         padding: 0;
         margin: 0;
      }
      body {
         padding: 0;
         margin: 0;
      }
      body {
         background-image: url(https://www.html.de/attachments/background-jpg.4083/);
         background-repeat: no-repeat;
         background-attachment: fixed;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
         background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         background-size: 100% 100%; /* Vollbild, aber verzerrt */
      }
   </style>
</head>
<body>
   <div id="Webseite">
      <header class="header">
         <div id="navigation">
            <ul>
               <li><a href="index.html"><h3><span id="homepage">Startseite</span></h3></a> | </li>
               <li><a href="#"><h3>G&auml;stebuch</h3></a> | </li>
               <li><a href="#"><h3>Soziale Netzwerke</h3></a> | </li>
               <li><a href="#"><h3>Youtube Partner</h3></a> | </li>
               <li><a href="#"><h3>Forum</h3></a> | </li>
               <li><a href="#"><h3>Minecraft Server</h3></a> | </li>
               <li><a href="#"><h3>TeamSpeak</h3></a> | </li>
               <li><a href="#"><h3>Kontakt</h3></a></li>
               </li>
            </ul>
         </div>
      </header>
      <nav>
      </nav>
      <article>
         .
      </article>
      <footer>
         .
      </footer>
   </div>
</body>
</html>

Gruss

MrMurphy
 
Du möchtest also das das Bild immer gleich groß bleibt (beim Reinzoomen sieht mann einen kleineren Bild ausschnitt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben