[CSS] nur oberen Bildbereich als Background

[xero7]

Guten Tag,

ich habe es schön öfter gesehen, dass mittels css nur einzelne Bereiche einer Grafik als Background definiert wurden. Ich frage mich nun wie das funktioniert. Ich habe z.B. eine Grafik. Diese Grafik stellt eine Box mit rounden Ecken dar. Jetzt möchte ich in dem einen Div nur den oberen Bereich als Background haben. Im nächsten Div möchte ich dann den mittleren Boxbereich haben, bei dem keine Ecken vorhanden sind. Und beim letzten Div dann die unteren Ecken. Ist das möglich?

Liebe Grüße und vielen Dank!
xero

 

[Gegenstrom]

AW: [CSS] nur oberen Bildbereich als Background

ja, das ist möglich, voraussetzung kenntnisse in css
grafik zerschneiden, je nachdem als jpg, png oder gif abspeichern
siehe bsp.:

#diveins{
background-image:url(obereecken.jpg);
}
#divzwei{
background-image:url(mitte.jpg);
}
#divdrei{
background-image:url(untereecken.jpg);
}

falls es nicht das gesuchte ist, problem nochmal genau beschreiben, mit bsp

 

[CrazyLopp]

AW: [CSS] nur oberen Bildbereich als Background

Das was Gegenstrom schon schreibt ist richtig, so macht man es normalerweise, doch dank CSS3 könntest du dies auch ganz ohne Grafik lösen:

border-radius: 10px;

Das wäre es schon, hiermit hätte deine Bock an allen Seiten runde Ecken mit dem Radius von 10 Pixeln!


Beste Grüße
Crazylopp

 

[Myhar]

AW: [CSS] nur oberen Bildbereich als Background

Die Technik die du suchst nennt sich sliding doors. Das Grundprinzip beschreibt das ganze für eine Navigation und beschränkt sich auf die horizontale Verschiebung.
Das ganze lässt sich dann natürlich auch variieren und anpassen.
Möchte man jedoch eine in der Höhe + Breite komplett flexible Box, dann würde ich das ganze trotzdem mit verschiedenen Grafiken lösen. Jedoch würde ich eine Hintergrundgrafik, anders als es Gegenstrom vorgeschlagen hat, nie als jpg abspeichern.
Falls keine älteren Browser mehr unterstützt werden sollen, ist einewohl am praktischsten und auch am flexibelsten.

L. G.

 

[magicsepp]

AW: [CSS] nur oberen Bildbereich als Background

@Myhar
die gesuchte Technik heisst "Sprites" A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death und
älteren IE's (kleiner 9) kann mit "css3pie" CSS3 PIE: CSS3 decorations for IE die Sytax "border-radius: 10px;beigebracht werden.

 

[jackprince]

AW: [CSS] nur oberen Bildbereich als Background

Nochmal zusammengefasst:

A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death sollte ds sein was du suchst. (wie von magicseep gepostet)

Wie die Technik heißt ist recht uninteressant.
Wichtig ist grob gesagt das das Bild größer ist als der Bereich wo es später rein soll.

Im CSS verschiebt man dann einfach den Hintergrund.

Bsp.

Bild mit 2 Icons (untereinander), jedes Icon 30x30 Pixel.
Also ein Bild im Format 30*60 Pixel
Nun möchte man dieses Hintergrundbild an zwei Stellen der Seite benutzen.

CSS

#icon1, #icon2 {
height: 30px;
 width: 30px;
font-size: 0;
}

#icon1 {
 background: url('path/icon.jpg') no-repeat 0 0;
}
#icon2 {
  background: url('path/icon.jpg') no-repeat 0 -30px;
}

HTML

<div id="icon1">&nbsp;</div>
<div id="icon2">&nbsp;</div>

 

[Myhar]

AW: [CSS] nur oberen Bildbereich als Background

Wie die Technik heißt ist recht uninteressant.

Das finde ich nicht, denn wenn man weiß wie etwas heißt kann man sich leicht Hilfe holen (bzw. treffender danach googlen)
Das man von selber nicht unbedingt auf die Namen kommt, ist auch klar ;-)
Und natürlich kann man auch Sprites mit sliding doors kombinieren. Es ist alles eine Frage der Anforderungen an die Grafik. Also ob sich ein Container jetzt horizontal und vertikal oder doch nur in eine dimension skalieren soll.
Mit den vielen hier genannten Lösungsvorschlägen sollte der Threadersteller jedoch eine passende Lösung finden

L. G.

 

[jackprince]

AW: [CSS] nur oberen Bildbereich als Background

Na gut ... gebe ja schon nach

Ich wusste bisher nichtmal das man für diese Sache einen Namen benötigt. Ich habs einfach gemacht wenn ichs brauchte

@Xero7

Falls dir das ganze geholfen hat, editiere doch bitte einfach deinen ersten Beitrag oben, mach kenntlich das es gelöst ist und schreib die Lösung in den Beitrag. Das sollte anderen helfen schneller eine Lösung für ein ähnliches Problem zu finden.