✔ Background-Image, div mit css - wird nicht angezeigt

[pixel05]

Hallo,
ich schaue nicht mehr durch, vielleicht sieht jemand das Problem. Kurz etwas zu dem Versuch, der mir bisher nicht richtig gelingt. Ich möchte eine barrierefreie Seite bauen,
dazu habe ich ein Styleswitcher eingebaut. Jetzt versuche ich alle Bilder über CSS, als background-image einzubinden. Dadurch könnte ich alternativ eine kontrastreiche Seite anbieten.
Ich würde gerne z.b. statt farbigen Bildern, diese mit schwarz-weiß Bildern austauschen. Leider funktioniert dies nicht in Mozilla, FireFox und Opera, nur der IE ist zu Kompromissen offen, also muss da irgendwo ein Fehler sein, nur welcher?

Liegt das daran, dass im HTML, die DIV´s leer sind? Ich habe den Div´s extra eine Hintregrundfarbe und einen gleichfarbigen Border zugewiesen.

Könnt ihr euch einmal Quelltext ansehen

<!-- div-bereich im html, zwei ebenen in denen grafiken extern abgebildet werden sollen -->

<div id="box3">
    <div  class="pic1" title="Selbstbildnis einer Teilnehmerin"></div>

  <!-- Liste mitte -->
  <div  class="temi">

    <ul class="lititel">
      <li class="mi">Text 1</li>
      <li class="mi1">Text 2<br />
        und Kurse</li>
      <li class="mi2">Text 3</li>
    </ul>
  </div>

    <div class="pic2" title="Gruppenarbeit"></div>
 </div>



/* im CSS sieht es so aus, habe nur die wichtigsten css abgebildet*/

/*Dreispalter*/

#box3{
        padding: 0px;
        float: left;
        height: auto;
        width: 80%;
        margin-left:1.6em;
        margin-top: 1em;
}



#box3 div.pic1{
	float: left;
	height:128px;
	width: 169px;
	padding:0;
	margin-top:2px;
	background-attachment: fixed;
	background-color:#e9eef4;
	background-image: url(../../img/bilder/operat.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	visibility: visible;
	z-index:auto;
	border: 1px solid #e9eef4;

}


#box3 div.pic2{
	float: right;
	height: 128px;
	width: 192px;
	margin-left: 0px;
	padding:0;
	margin-top:2px;
	margin-bottom:0px;
	margin-right: 5px;
	background-attachment: fixed;
	background-color:#e9eef4;
	background-image: url(../../img/bilder/gruppe.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: 1px solid #e9eef4;
	z-index:auto;

}

mx

 

[Maik]

Re: bac

Der Grund für das nicht-Anzeigen der DIV-Hintergrundgrafiken in FireFox, Mozilla und Opera ist die Kombination der CSS-Eigenschaften float:left / float:right und background-attachment:fixed.

Letztere wird eingesetzt, wenn der Inhalt eines Elements scrollfähig ist und die Hintergrundgrafik nicht mitwandern soll -> Wasserzeichen-Effekt.

Aus deinem Source-Demo kann ich aber nicht entnehmen, daß die beiden DIVs .pic1 und .pic2 scrollfähig sein sollen, da sie zum einen nicht die CSS-Eigenschaft overflow:scroll bzw. overflow:auto besitzen und zum anderen ja auch keinen Text enthalten


Somit gibt es zwei Lösungen:

• Wenn die DIVs keinen Text enthalten bzw. nicht gescrollt werden können:
  
  Entferne die CSS-Eigenschaft background-attachment aus den beiden Selektoren #box3 div.pic1 und #box3 div.pic2.
  
  
  
• Wenn die DIVs einen scrollfähigen Text enthalten sollen:

#box3{
        padding: 0px;
        float: left;
        height: auto;
        width: 80%;
        margin-left:1.6em;
        margin-top: 1em;
}

#box3 div.pic1{
        float: left;
        height:128px;
        width: 169px;
        overflow: auto;
        padding:0;
        margin-top:2px;
        background-color:#e9eef4;
        background-image: url(../../img/bilder/operat.jpg);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        visibility: visible;
        z-index:auto;
        border: 1px solid #e9eef4;

}

* html #box3 div.pic1 /* Für IE */
{
background-attachment: fixed;
}

#box3 div.pic2{
        float: right;
        height: 128px;
        width: 192px;
        overflow: auto;
        margin-left: 0px;
        padding:0;
        margin-top:2px;
        margin-bottom:0px;
        margin-right: 5px;
        background-color:#e9eef4;
        background-image: url(../../img/bilder/gruppe.jpg);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        border: 1px solid #e9eef4;
        z-index:auto;

}

* html #box3 div.pic2 /* Für IE */
{
background-attachment: fixed;
}

Anmerkung zum CSS-Code:

Im FireFox, Mozilla und Opera wandern die DIV-Hintergrundgrafiken auch ohne die CSS-Eigenschaft background-attachment:fixed nicht mit. Aus diesem Grund habe ich die CSS-Eigenschaft aus den beiden Selektoren entfernt. Da der IE diese Angabe aber benötigt, wird diese mit Hilfe des Star-HTML-Hacks * html #box3 div.pic1 und * html #box3 div.pic2 als IE-spezifischer Selektor notiert.

 

[pixel05]

Hallo Maik,

vielen Dank für Deine Hilfe, ich hätte nicht gedacht das die Angabe background-attachment:fixed sich so auswirkt.

..die Kombination der CSS-Eigenschaften float:left / float:right und background-attachment:fixed

Ich brauche background-attachment:fixed eigentlich auch gar nicht, denn .pic1 und .pic2 sind DIV´s die nur einzelne Bilder enthalten sollen, ohne Text.

Vielen Dank, ich habe fixed rausgenommen und alles funktioniert.

mx

 

[Maik]

Vielen Dank, ich habe fixed rausgenommen und alles funktioniert.

Ich habe noch einen Tipp für dich:

Lies bitte meine Signatur und klick anschliessend auf den '"Status"-Button neben dem "Antworten"-Button, um das Thema als "erledigt" zu markieren.

Vielen Dank