Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[CSS] nur oberen Bildbereich als Background“

xero7

» Unterdrück(t)er

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

Aktives Mitglied

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.:
HTML:
#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

Hat es drauf

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:

Code:
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

Hat es drauf

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.
 

jackprince

xHTML & CSS Junkie

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
HTML:
#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
HTML:
<div id="icon1">&nbsp;</div>
<div id="icon2">&nbsp;</div>
 

Myhar

Hat es drauf

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

xHTML & CSS Junkie

AW: [CSS] nur oberen Bildbereich als Background

Na gut ... gebe ja schon nach :p

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

@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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben