zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Background-Image 'unterhalb' eines Div's darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.09.2011, 14:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard Background-Image 'unterhalb' eines Div's darstellen

Hallo,

ich habe ein ganz einfaches Div. Ich habe diesem Div ein Background-Image zugewiesen. Dieser erscheint aber innerhalb des Div's. Also zwar Bottom aber Bottom innerhalb. Ich muss aber dieses Bild ausserhalb des Div's am unteren Rand anbringen. Wie kann man das machen?

HTML-Code:
.widget {
	width:580px;
	padding:10px;
	margin-top:10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color:#fff;
	box-shadow: 0 0 3px 1px #ccc; */
	background-image:url('images/widget_bottom_wide.jpg');
	background-position:bottom;
	background-repeat:no-repeat;
}
Gruß
Yavuz
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.09.2011, 14:51
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Du kannst das BG-Image des Div nicht außerhalb von diesem anzeigen. Du könntest aber mit
Code:
.widget:after{
content: '';
background-image: url('images/widget_bottom_wide.jpg');
position: absolute;
bottom: - Hintergrundbildhöhe;
left: 0;
width: Hintergrundbildbreite;
height: Hintergrundbildhöhe;
}
noch etwas an den Div anhängen. Dafür musst du deinem .widget noch position:relative; mitgeben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.09.2011, 15:15
do{ atmen(); }while(!tot)
XHTMLforum-Mitglied
 
Registriert seit: 03.08.2011
Beiträge: 103
Sinokle befindet sich auf einem aufstrebenden Ast
Standard

Das würde zwar funktionieren, aber nicht im IE6 und 7. Nur zur Info für den Themenersteller.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.09.2011, 15:41
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von Sinokle Beitrag anzeigen
Das würde zwar funktionieren, aber nicht im IE6 und 7. Nur zur Info für den Themenersteller.
Hiermit wohl.

gruß,
take
Mit Zitat antworten
  #5 (permalink)  
Alt 04.09.2011, 15:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Hi,

danke für den Hinweis! Also ich teste gerade unter FF6, Chrome, IE9 und bisher keine Probleme. IE6 würde ich nicht berücksichtigen, aber IE7 würde ich schon noch gerne. Daher meine Frage:

Was wäre eine Alternative zur Lösung von cebito?
Mit Zitat antworten
  #6 (permalink)  
Alt 04.09.2011, 15:43
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von bogazci Beitrag anzeigen
Was wäre eine Alternative zur Lösung von cebito?
Entweder der von mir angesprochene (zugegeben etwas dreckige) JS-Fix oder ein extra div (evtl. nur für den IE7).

gruß,
take
Mit Zitat antworten
  #7 (permalink)  
Alt 04.09.2011, 18:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 30
bogazci befindet sich auf einem aufstrebenden Ast
Standard

Super, vielen Dank!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 21:41
Problem mit CSS Style flo007 CSS 3 25.01.2009 18:08
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:04 Uhr.