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

Fenster auf Hintergrund

Good Guy Gero

Neues Mitglied
Hallo,

also ich bin neu im bereich html und css und hab mir mit kleinen tutorials auf youtube schonmal ne kleine homepage gebastelt.
dabei hab ich ein hintergrundbild über die gesamte seite und darauf ein weißes feld worauf dann alles steht gemacht. jetzt wollte ich als titelbild quasi ein fenster in den weißen bereich machen durch den man das hintergrundbild sehen kann. so als ob ein blatt papier mit ausgeschnittenem loch auf dem hintergrundbild liegt.
kann mir jemand helfen mit welchen befehlen in css oder html ich sowas machen kann?

mfg gero

ps: oder gibts schon einen thread dazu den ich übersehen hab?
 
Hallo,

oder gibts schon einen thread dazu den ich übersehen hab?

Nein, weil solche Spielereien mit sinnvollem HTML / CSS in der Regel nichts zu tun haben. Zudem ist deine Beschreibung leider zu vage für eine konkrete Antwort.

Wie groß soll zum Beispiel das Fenster sein? Wie soll es angeordnet sein? Wo befindet sich der Text?

Wie soll sich die Seite auf Smartphones und Tablets verhalten? Bei Quer- und Hochformat?

Wie soll sich die Seite verhalten, wenn die Bildschirmgröße nicht mehr ausreicht um den Text anzuzeigen?

Wozu ein ganzseitiges Hintergrundbild, von dem dann nur ein Teil zu sehen ist? Nur den Ausschnitt zu zeigen würde das Übertragungsvolumen verringern.

Gruss

MrMurphy
 
Ahh okay ich sehe schon, dass das zu viel arbeit wird.
ich hatte gehofft es gäbe einen befehl mit dem ich einfach einem fenster von z.B. 200 px breite und 100 px höhe "sagen" kann dass es "durchsichtig" sein soll. aber wenn ich da jetzt 200 zeilen schreiben muss dann lass ich es einfach weg.
also ich hab jetzt einfach mal als beispielbild das hier : http://imgur.com/YHELMcp
nur soll jetzt da wo der kirschzweig ist auch der hintergrund zu sehen sein.
oder ist das vielleicht leichter wenn ich den weißen teil in vier teilestücke um das kleine fenster drum herum mache und das problem so umgehe?

danke im vorraus

gruß gero
 
Nein, zu viel Arbeit ist es nicht. MrMurphy wollte dir nur sagen, dass er es aus prizipiellen Erwägungen nicht für sinnvoll hält, so etwas zu machen.
Schau mal, dies müsste das sein, was Du dir vorstellst: Ein transparentes Rechteck mit einem weißen Rand:
http://jsfiddle.net/Sempervivum/qp8ymbns/
 
Hallo

oder ist das vielleicht leichter wenn ich den weißen teil in vier teilestücke um das kleine fenster drum herum mache und das problem so umgehe?

Nein, eher nicht. Es ist schlechter Stil und sollte vermieden werden, in den HTML-Quelltext im body-Bereich Elemente einzufügen, die nur dem Aussehen beziehungsweise dem Layout dienen sollen.

Wenn es denn unbedingt sein soll würde ich das über ein Hintergrundbild mittels linear-gradient erledigen. So sind nur Eingriffe ins CSS notwendig und dafür ist es ja da. Ich gehe erst mal nur von einem Desktop-Bildschirm im Querformat aus. Andere müssten noch per Media-Queries berücksichtigt werden. Aber ich will ja nur eine mögliche Lösungsmöglichkeit aufzeigen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hintergrund mit Fenster 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      body {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e8/Hameenlinna_Aulanko_Nature_Reserve_view_1.jpg);
         background-size: cover;
         background-attachment:fixed;
      }
      div {
         background-image:
         linear-gradient(yellow 0, yellow 8rem, transparent 8rem, transparent 100%),
         linear-gradient(transparent 0, transparent 18rem, yellow 18rem, yellow 100%),
         linear-gradient(to right, yellow 0, yellow 11%, transparent 11%, transparent 100%),
         linear-gradient(to right, transparent 0, transparent 90%, yellow 90%, yellow 100%);
         width: 80%;
         padding: 1rem;
         margin: 6rem auto 0;
      }
      p {
         font-size: 1.4rem;
      }
      p:nth-child(2) {
         margin-bottom: 12rem;
      }
   }
   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <div>
      <h1>Millionär Michel</h1>
      <p>In Deutschland gibt es rund 120.000 Vermögensmillionäre.</p>
      <p>Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht.</p>
      <p>Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat. Vielleicht ist er ein Winzer, der sich zur Ruhe gesetzt und die Weinberge verkauft hat, vielleicht ist er auch ein in die Jahre gekommener Handwerker oder Zahnarzt.</p>
      <p>Jedenfalls will Herr Michel, da er keine weiteren Einkünfte hat, von dieser Million leben. Er beschliesst also: keine Segeljacht in Marbella und keine Villa im Tessin. Vielmehr legt er seine Million in festverzinslichen Wertpapieren an.</p>
      <p>Dazu wählt er zum Beispiel Bundesobligationen. Der Staat bietet ihm für diese fünfjährigen Papiere zur Zeit 6,09 Prozent. Herr Michel bekommt also 60.900 DM brutto im Jahr. Nun macht Herr Michel seine Steuererklärung, verrechnet den Zinsabschlag mit seiner Einkommensteuerbelastung, macht Freibeträge geltend, nutzt abzugsfähige Sonderausgaben und den Altersentlastungsbeitrag. Mit einigem Geschick reduziert er sein zu versteuerndes Einkommen so auf nur mehr 45.000 DM.</p>
      <p>Darauf hat er dann knapp 10.500 DM Steuern zu zahlen. Es bleiben ihm von seinem Zinsertrag also 50.400 DM übrig. Doch damit nicht genug. Nun wird dem treuen Michel - er hat schliesslich ein Vermögen - noch Vermögensteuer abverlangt.</p>
      <p>Wieder nutzt er alle Freibeträge, reduziert sein steuerpflichtiges Vermögen auf 920.000 DM, und doch greift der Fiskus kräftig zu. Wenn es nach den neuesten Plänen der Regierung geht, muss Michel ein Prozent des Gesamtbetrages zahlen. Für ihn bedeutet das, noch einmal 9.200 DM an den Staat zu überweisen. Seine Bilanz: Für die Million Anlagekapital in Bundesobligationen behält er am Ende 41.200 DM Zinsertrag übrig - genausoviel wie die Inflationsrate, die derzeit Michels D-Mark entwertet.</p>
      <p>Das Fazit: Der steuerliche Millionär muss unter den gegenwärtigen Umständen froh sein, wenn er keinen realen Vermögensverlust erleidet.</p>
      <p>Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat. Vielleicht ist er ein Winzer, der sich zur Ruhe gesetzt und die Weinberge verkauft hat, vielleicht ist er auch ein in die Jahre gekommener Handwerker oder Zahnarzt.</p>
      <p>Jedenfalls will Herr Michel, da er keine weiteren Einkünfte hat, von dieser Million leben. Er beschliesst also: keine Segeljacht in Marbella und keine Villa im Tessin. Vielmehr legt er seine Million in festverzinslichen Wertpapieren an.</p>
      <p>Dazu wählt er zum Beispiel Bundesobligationen. Der Staat bietet ihm für diese fünfjährigen Papiere zur Zeit 6,09 Prozent. Herr Michel bekommt also 60.900 DM brutto im Jahr. Nun macht Herr Michel seine Steuererklärung, verrechnet den Zinsabschlag mit seiner Einkommensteuerbelastung, macht Freibeträge geltend, nutzt abzugsfähige Sonderausgaben und den Altersentlastungsbeitrag. Mit einigem Geschick reduziert er sein zu versteuerndes Einkommen so auf nur mehr 45.000 DM.</p>
      <p>Darauf hat er dann knapp 10.500 DM Steuern zu zahlen. Es bleiben ihm von seinem Zinsertrag also 50.400 DM übrig. Doch damit nicht genug. Nun wird dem treuen Michel - er hat schliesslich ein Vermögen - noch Vermögensteuer abverlangt.</p>
      <p>Wieder nutzt er alle Freibeträge, reduziert sein steuerpflichtiges Vermögen auf 920.000 DM, und doch greift der Fiskus kräftig zu. Wenn es nach den neuesten Plänen der Regierung geht, muss Michel ein Prozent des Gesamtbetrages zahlen. Für ihn bedeutet das, noch einmal 9.200 DM an den Staat zu überweisen. Seine Bilanz: Für die Million Anlagekapital in Bundesobligationen behält er am Ende 41.200 DM Zinsertrag übrig - genausoviel wie die Inflationsrate, die derzeit Michels D-Mark entwertet.</p>
      <p>Das Fazit: Der steuerliche Millionär muss unter den gegenwärtigen Umständen froh sein, wenn er keinen realen Vermögensverlust erleidet.</p>
   </div>
</body>
</html>

Die CSS-Anweisungen, insbesondere linear-gradient, können natürlich noch etwas kompakter geschrieben werde, aber ich wollte sie für Anfänger etwas übersichtlicher halten.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Zurück
Oben