Probleme mit Bilder im Header

**rowetzel** · 26.04.2014, 23:43

Hallo zusammen,
bin gerade daran eine Website für ein befreundetes Paar zu Ihrer Hochzeit zu gestalten. Nun habe ich ein Problem mit dem Bild auf der Frontseite (s. Screenshot im Anhang).
Das Bild hätte ich gerne gleich gross wie der Header excl. Navigation. Nun ist das Bild aber kleiner, obwohl die Bildgrösse mit 1190 x 328 px gleich gross ist, wie der header.

Hier zur Sicherheit noch der Quelltext:

Code:

<html lang="de">
<head>

  <meta charset="utf-8">
  <title>Home - Annik &amp; Stef</title>
  <base href="http://localhost:8888/annik_stef/">

  <meta name="robots" content="index,follow">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="generator" content="Contao Open Source CMS">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>#wrapper{width:1190px;margin:0 auto}#header{height:372px}#footer{height:35px}</style>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rokkitt:400,700|Josefin+Sans:700">
<link rel="stylesheet" href="assets/css/898d2883f74a.css">
    <script src="assets/js/ecfbf4f81401.js"></script>
  <!--[if lt IE 9]><script src="assets/html5shiv/3.6.2/html5shiv.js"></script><![endif]-->

</head>
<body id="top" class="mac safari webkit sf7">

  <div id="wrapper">

          <header id="header">
        <div class="inside">
          
<!-- indexer::stop -->
<div class="mod_randomImage block">

  
  <figure class="image_container">

    
    <img src="files/theme_hochzeit/einstiegsseite.jpg" width="1190" height="328" alt="einstiegsseite">

    
    
  </figure>

</div>

Ich kann leider hier keine Links veröffentlichen, da die Seite noch nicht online ist.
Ich arbeite mit dem Buch "Website erstellen mit Contao 3" von Peter Müller. Bin auf der Suche, ob ich dort etwas übersprungen habe, leider habe ich bisher nichts gefunden.
Wer mir einen Tipp geben kann, ich wäre sehr dankbar!
Und falls Ihr euch fragt, wieso ich mit der Version 3.1.1 arbeite, leider funktioniert die Erweiterung [wishlist] nur bis hier und nicht mit einer aktuelleren Version...

Screenshot 2014-04-27 00.22.39 kopieren.jpg

**ciaobello** · 27.04.2014, 16:24

Ausschlaggebender oder genau so wichtig wie der Html Quelltext ist das CSS. Da Scheinst Du ein Padding oder Border drin zu haben welches den Rand frei lässt resp die ganze Anzeige des Bildes einschränkt (CSS wird ja nach unten vererbt... so sagt es mindestens der Name "Cascading Style Sheets").

Am besten mit dem Firebugg oder ähnlich mal rumspielen und Test halber in der entsprechenden Klasse diese Werte mit !important überschreiben.

Alternativ kannst Du das Bild doch auch als Hintergrund im CSS deklarieren. Dazu schaust Du dir am Besten die Demoseiten der verschiedenen Themen an z.Bsp. im Theme Store oder ähnlich.

Syntax findest auch bei google

**tab** · 27.04.2014, 17:19

Das wird wohl im Browser-CSS drinstehen. Bei meinem Firefox steht zum Beispiel unter resource://gre-resources/html.css:

HTML-Code:

blockquote, figure {
  display: block;
  margin: 1em 40px;
}

**rowetzel** · 27.04.2014, 19:42

Hallo Ihr Zwei

Danke vielmals für eure Inputs. Ich habs jetzt dank euren Denkanstössen gefunden.

Ich habe imm CSS-Framework vergessen den CSS-Reset zu aktivieren....
Jetzt klappts bestens!

Danke euch!

Thema: Probleme mit Bilder im Header

Themen-Optionen

Thema durchsuchen

Probleme mit Bilder im Header

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher