Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Webdesign » Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Artikel weiterempfehlen

  • Aktualisiert am 6. März 2023
  • Jetzt kommentieren
  • Joy Shaheb von Joy Shaheb
Lesedauer: 11 Minuten

Inhaltsverzeichnis

Im Gegensatz zu einem normalen Bild- oder Videoelement wird CSS Background-Image eingesetzt, wenn man über ein Bild oder Video noch einen responsiven Text legen möchte, z. B. bei Hero-Images. Auch auf der Startseite von Dr. Web findet man solch ein Element mit CSS Hintergrundbild:

Das Hero-Image-Element von der Dr. Web Startseite auf dem steht: „Dr. Web die besten Digitalagenturen für Ihr Projekt.“
Das Hero-Image von der Dr. Web Startseite ist ebenso ein Element mit CSS Hintergrundbild.

Als Hintergrundbild können dabei alle gängigen Bildformate eingesetzt werden. Sogar inline-codierte Bilder (base64), SVG und Farbverläufe werden unterstützt. In diesem Beitrag werden wir jede einzelne CSS-Hintergrundeigenschaft kennenlernen, sowie zum Schluss die sog. „Shorthand“-Syntax von CSS Background-Image. Los geht’s!

Alle CSS Background-Image Eigenschaften im Überblick

Hier eine Liste mit allen Eigenschaften, die wir heute besprechen werden.

alle CSS background image Eigenschaften.
Hier die Liste aller CSS Hintergrund-Eigenschaften alphabetisch sortiert: background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

Was sind CSS Background-Image Eigenschaften?

Mit den CSS-Hintergrundeigenschaften können wir die Größe und Eigenschaften von Bildern steuern, so dass wir Bilder und darüber liegende Texte und z.B. Buttons mobil-freundlich sowohl für kleinere als auch für größere Bildschirme erstellen können.

Zum Beispiel,

  • Die Eigenschaft background-size erlaubt uns, die Breite und Höhe unseres Bildes entsprechend der Bildschirmgröße anzupassen.
  • background-position erlaubt es uns, dem Browser mitzuteilen, wo er das Bild auf dem Bildschirm platzieren soll.
  • Und vieles mehr!

Ein Demo-Projekt aufsetzen

Im Idealfall kennst Du schon ein paar CSS Grundlagen und etwas HTML. Du brauchst außerdem einen HTML-Editor Deiner Wahl, um die Dateien bearbeiten zu können. Für dieses Beispiel benutzen wir Visual Studio Code (auch VS-Code genannt).

Die HTML-Datei erstellen

Erstelle ein div mit dem Klassennamen ‚container‘ innerhalb des body-Tags in der HTML-Datei.

 <div class="container"></div>

Die CSS-Datei erstellen

Im CSS musst du eine Höhe für den Container angeben, sonst können wir das Bild nicht sehen. In unserem Fall werden wir sie auf 100vh setzen, das bedeutet, das Bild soll die volle Höhe des Bildschirms (vh steht für Viewport Height, siehe „Neue Einheiten für responsive Designs“) einnehmen:

.container {
  height: 100vh;
}

Lade die Bilder für das Projekt herunter

Die Bilder und Beispieldateien kannst Du hier herunterladen.

Die Eigenschaften von CSS background-image

CSS background-image

Mit der Eigenschaft background-image können wir Bilder in unserem Stylesheet hinzufügen, wie folgt:

.container {
// Wir setzen den Bildpfad bzw. die URL in Anführungszeichen
  background-image: url(' ');
}

Wir können background-image auf 2 Arten verwenden:

  • Indem wir den relativen Pfad angeben, z.B.
.container {
  background-image: url('/wp-content/uploads/2021/08/background-image.png');
}
  • Oder durch die Angabe der URL des Bildes, also:
.container {
  background-image: url('https://www.drweb.de/wp-content/uploads/2021/08/background-image.png');
}

Wie man CSS background-image einbindet

CSS Hintergrundbilder kann man wahlweise über die URL (als direkten Link) oder per relativen Pfad einbinden. Es gibt drei Fälle, in welchen es Sinn macht, einen relativen Pfad anzugeben:

  1. Wenn image und style.css im selben Ordner sind, sieht der relative Pfad so aus: background-image: url("kitty.png")
  2. Wenn sich das Bild im einem Unterordner — hier „Assets“ — befindet, sieht der relative Pfad so aus: background-image: url("/assets/kitty.png")
  3. Wenn sich das Bild im einem übergeordneten Ordner befindet, benutzen wir diese Pfadangabe: background-image: url("../kitty.png")

Wenn die Bilder, die HTML und die style.css – Datei im gleichen Ordner sind, sieht das so aus:

Bild vom Projekt in Sublime.
So sieht der Ordner als Projekt im HTML-Editor aus.

Die CSS-Eigenschaft background-size

Wir können die Größe eines Bildes mit der Eigenschaft background-size anpassen.

background-size Titelbild.

Das CSS dazu sieht aus wie folgt:

.container {
  background-size: cover;
}

Wir können background-size auf 3 Arten verwenden:

  • wir können die Werte cover oder contain verwenden
  • die Breite und Höhe des Bildes festlegen (z.B. background-size: 200px 200px;)
  • auto verwenden

Beginnen wir mit der Diskussion der Cover- und Contain-Werte.

Der Unterschied zwischen background-size: cover und contain anhand eines Beispielbilds mit einem Bären, der Ramen-Nudeln isst, aufgezeigt.

Der Wert background-size: cover

Beim Wert background-size: cover; füllt das Bild die ganze Breite aus, und zwar so, die kurze Seite des Hintergrundbildes in die Box reinpasst. Dafür müssen wir ein Bild einfügen, dessen Höhe festlegen und die Bildwiederholung stoppen. Im CSS geht das folgendermaßen:

.container {
	background-image: url('cute-bear.png');
	background-repeat: no-repeat;
	background-size: cover;
// Höhe nicht vergessen	
	height: 100vh;
}

 

Ein Kurzvideo, das einen Bören zeigt, der Ramen-Nudeln schlürft. Im Video wird das Bild auf verschiede Größen skaliert.
Wenn wir diese Eigenschaft verwenden, wird das Bild auf die gesamte Breite gestreckt, auch wenn wir die Größe des Fensters ändern.

Der Wert background-size: contain

Bei background-size: contain; wird die längere Seite des Hintergrundbildes in die umgebende Box eingepasst. Um das zu erreichen, geben wir folgende Werte an:

.container {
	background-image: url('cute-bear.png');
	background-repeat: no-repeat;
	background-size: contain;
// Höhe nicht vergessen	
	height: 100vh;
}
Ein Kurzvideo, das einen Bären zeigt, der Ramen-Nudeln schlürft. Im Video wird das Bild auf verschiede Größen skaliert, sodass die lange Seite des Hintergrundbildes immer in das Fenster passt.
Bei background-size: contain; wird die lange Seite des Hintergrundbildes in die Box eingepasst.

Breite und Höhe bei CSS Hintergrund-Bildern

Wir können die Breite und Höhe des Bildes mit der Eigenschaft background-size festlegen. Bitte beachten, dass dadurch die Bilder verzerrt aussehen können, wie im folgenden Beispiel:

Das Bild mit dem Bären auf 200px mal 200px skaliert. Es wird verzerrt.
Geben wir ein anderes bzw. falsches Seitenverhältnis an, sieht das Bild verzerrt aus.

Hier die Größenangaben im CSS:

.container {
// hier definieren wir width & height
	background-size: 200px 200px;
}

Vergessen wir auch nicht, das Bild einzufügen, seine Höhe festzulegen und die Bildwiederholung zu beenden. Das Codeschnipsel sieht wie folgt aus:

.container {
	background-image: url('cute-bear.png');
	background-repeat: no-repeat;

// hier definieren wir width & height
	background-size: 200px 200px;
// Höhe nicht vergessen	
	height: 100vh;
}

Automatische Größenanpassung mit CSS background-size: auto

Wenn wir diesen Wert verwenden, bleibt das Bild in seiner ursprünglichen Größe. Es ändert sich nicht, wenn wir die Größe des Fensters ändern. Das sieht dann so aus:

Ein Kurzvideo, das einen Bären zeigt, der Ramen-Nudeln schlürft. Im Video bleibt das Bild immer vollständig sichtbar und ändert seine Größe, wenn sich die Breite des Bildschirms ändert.
Mit background-size: auto passt sich das Bild immer automatisch der Größe des Bildschirms an, so dass alle Bereiche des Bildes immer sichtbar bleiben.

 

Die CSS-Eigenschaft background-repeat

Mit dieser Eigenschaft können wir ein und dasselbe Bild mehrfach wiederholen.

Auf dem Titelbild steht backgrund-repeat.

Das CSS dazu sieht wie folgt aus:

.container {
	background-repeat: repeat;
}

CSS background-repeat hat sechs Werte:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • space
  • round
Ein Überblick über die verschiedenen Werte bei CSS background-repeat.
bei CSS Background repeat round wiederholen sich die Bilder bis zum Rand des Viewports. bei CSS Background repeat space verteilen sich die Bilder mit dem gleichen Abstand zueinander.

Wir untersuchen nun, was mit den einzelnen Werten geschieht. Zuvor müssen wir jedoch ein Bild mit der Eigenschaft background-image einfügen, in folgendem Beispiel ist es die kitty.png:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
// hier werden wir die Werte verändern
	background-repeat: no-repeat; 
	height: 100vh;
}

CSS background-repeat

Die X- und die Y-Achse in background-repeat.

Mit diesem Wert können wir dasselbe Bild sowohl auf der X- als auch auf der Y-Achse mehrfach wiederholen, solange der Bildschirmbereich nicht endet. Hier ist die Größe des Kätzchens 200px x 200px.

Um dieses Ergebnis zu erzielen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: repeat;
	height: 100vh;
}

Der Wert background-repeat: repeat-x

Dieser Wert ermöglicht es uns, dasselbe Bild mehrmals entlang der X-Achse zu wiederholen, solange der Bildschirmbereich nicht endet.

Die Kitty wird entlang der X-Achse wiederholt angezeigt.

um dies zu erreichen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: repeat-x;
	height: 100vh;
}

Der Wert background-repeat: repeat-y

Dieser Wert funktioniert genauso wie „repeat-x“, aber entlang der Y-Achse, solange der Bildschirmbereich nicht endet.

Die Kitty wird entlang der Y-Achse wiederholt angezeigt.

um dies zu erreichen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: repeat-y ;
	height: 100vh;
}

Der Wert background-repeat: no-repeat

Mit diesem Wert können wir unser Originalbild ohne Wiederholungen erhalten. Dieser Wert ist wird bei CSS Hintergrundbildern am Häufigsten eingesetzt, da diese sich in der Regel nicht wiederholen sollen.

Das Bild von der Kitty wird nur einmal angezeigt, das Bild wiederholt sich nicht.

um dies zu erreichen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: no-repeat;
	height: 100vh;
}

Der Wert background-repeat: space

Dieser Wert funktioniert sowohl entlang der X- als auch der Y-Achse. Wir können den Hauptunterschied zwischen den Werten space und round sehen, wenn wir die Größe des Browserfensters ändern. Dabei werden die Zwischenräume so gleichmäßig so weit gestreckt, bis noch ein weiteres Bild in das Fenster hineinpasst.

bei CSS Background repeat space wird neben den Bilder Weißraum hinzugefügt, solange bis noch ein weiteres Bild auf die X- oder Y-Achse passt.

um dieses Resultat zu erreichen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: space;
	height: 100vh;
}

Der Wert background-repeat: round

Der Wert background-repeat: round; funktioniert sowohl entlang der X- als auch der Y-Achse. Das Bild wird gestreckt bzw. verzerrt, wenn wir die Größe des Fensters ändern.

bei CSS Background repeat round werden die Bilder verzerrt, solange bis noch ein weiteres Bild auf die X- oder Y-Achse passt.

um dies zu erreichen, schreiben wir:

.container {
	background-image: url('kitty.png');
	background-size: 200px 200px;
	background-repeat: no-repeat;
	height: 100vh;
}

Die CSS-Eigenschaft background-position

Diese Eigenschaft wird verwendet, um die Position eines Bildes auf dem Bildschirm zu ändern.

Eine Katze im Engelsgewand singt „background-position“.

Die Syntax von background-position ist wie folgt:

.container {
// Die Reihenfolge ist X-Achse mal Y-Achse
	background-position: 300px  200px;
}

Vergessen wir auch nicht, das Bild einzufügen, dessen Höhe festzulegen und die Bildwiederholung zu beenden. Wir haben die Größe des Kätzchens mit Hilfe der Eigenschaft background-size auf 200px X 200px festgelegt:

.container {
	background-image: url("kitty-idea.png");
	background-size: 200px 200px;
	background-repeat: no-repeat;
// Die Reihenfolge ist X-Achse mal Y-Achse
	background-position: 300px 200px; height: 100vh; }

Und das ist das Resultat:

Ein Kitty-Icon das um 300px nach rechts und 200px nach unten verschoben wurde.
In diesem Beispiel haben wir das Icon um 300px nach rechts und um 200px nach unten verschoben.

Darüber hinaus können auch eine Kombination aus diesen Werten verwenden:

  • top (nur Y-Achse)
  • left (nur X-Achse)
  • right (nur X-Achse)
  • bottom (nur Y-Achse)
  • sowie Prozentwerte

Als Beispiel wollen wir unser Kätzchen ganz unten rechts platzieren. Hier ist das Codeschnipsel dafür:

.container {
	background-image: url("kitty-idea.png");
	background-size: 200px 200px;
	background-repeat: no-repeat;

// In diesem Beispiel ist das Bild auf der Y-Achse unten und auf der X-Achse rechts ausgerichtet
	background-position: bottom right;
	height: 100vh;
}
Ein Kitty-Icon das um 300px nach rechts und 200px nach unten verschoben wurde.
Bei den Werten top, left, bottom oder right spielt die Reihenfolge der Syntax keine Rolle für die Zuordnung der Werte, sie gelten immer nur für die Y- oder die X-Achse.

Bei der Berechnung des verfügbaren Platzes auf dem Bildschirm bestimmen die %-Werte die Position des Bildes. So sieht es im Code aus:

.container {
	background-image: url("kitty-idea.png");
	background-size: 200px 200px;
	background-repeat: no-repeat;
// Die Reihenfolge ist X-Achse mal Y-Achse
	background-position: 25% 15%;
	height: 100vh; }

Und so sieht das Ergebnis aus:

Das Kitty-Icon ist in der Höhe um 15% nach unten und in der Breite um 25% nach rechts eingerückt.
Das Kitty-Icon ist in der Höhe um 15% nach unten und in der Breite um 25% nach rechts eingerückt.

Die CSS-Eigenschaft background-origin

Diese Eigenschaft legt fest, wie sich das Hintergrundbild in der es umgebenden Box verhält. Klingt abstrakt, drei Beispiele kommen aber sogleich.

Titelbild Background-Origin.

Hier das dazugehörige CSS:

.container {
	background-origin: border-box;
}

Dessen drei mögliche Werte sind:

  • border-box
  • padding-box (Standardwert)
  • content-box

Beim Standard-CSS-Box-Modell ist der äußerste Teil der Rahmen. Danach kommt das Padding und schließlich der eigentliche Inhalt in der Mitte.

Im CSS Box-Modell kommt aussen die Border, dann das innere Padding und dann der „Content“.
Im CSS Box-Modell kommt aussen die „Border“, dann das innere Padding und dann der „Content“.

Je nachdem, wie man also background-origin definiert, kommen dabei folgende Resultate heraus:

Ein und dasselbe Bild im Verhältnis zur es umgebenden Box.
In den drei verschiedenen Varianten geht das Hintergrundbild wahlweise bis rein in den Rand (die Border), nur bis zum inneren Padding oder die Hintergrundposition ist relativ zum Inhalt. Padding-Box ist der Standardwert, sofern nichts anderes definiert ist.

Um diese Ergebnisse zu erzielen:

  • brauchen wir zuerst ein Bild,
  • wir müssen die Bildwiederholung stoppen und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
  • Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst können wir nicht sehen, den Unterschied zwischen dem Padding-Box und der Content-Box.
  • Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um einen gestrichelten Rahmen auf dem Bildschirm zu erhalten.
  • Setzen Sie die Hintergrundgröße auf 640px X 959px

Im CSS sieht das dann so aus:

.container { 
	background-image: url('cute-girl.jpg'); 
	background-repeat: no-repeat; 
	background-size: 640 959px; 
	background-origin: content-box;
	padding: 40px; 
	border: 25px solid red; 
	border-style: dashed; 
	width: 500px; 
	height: 700px;
}

Die CSS Eigenschaft background-clip

Das Titelbild zu CSS Background-Clip.

Background-Clip beschneidet das Hintergrundbild, je nachdem welchen Rahmen man für das Bild festlegt:

.container {
	background-clip: border-box;
}

Die drei Werte von background-clip sind:

  • border-box
  • padding-box
  • content-box

Je nachdem, wie man also background-clip definiert, kommen dabei folgende Resultate heraus:

Ein und dasselbe Bild im Verhältnis zur es umgebenden Box.
Auch hier ist der Standardwert Padding-Box.

Um diese Ergebnisse nachzubilden:

  • brauchen wir ein Bild, müssen die Bildwiederholung stoppen, und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
  • Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst werden wir nicht in der Lage sein, den Unterschied zwischen dem Padding-Box und Content-Box zu sehen.
  • Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um den gestrichelten Rahmen auf dem Bildschirm zu sehen.
  • Setzen Sie die Hintergrundgröße auf 640px & 959px

Der Code sieht wie folgt aus:

.container { 
	background-image: url('cute-girl.jpg'); 
	background-repeat: no-repeat; 
	background-size: 640 959px; 
	background-clip: border-box;
	padding: 40px; 
	border: 25px solid red; 
	border-style: dashed; 
	width: 500px; 
	height: 700px;
}

Die CSS-Eigenschaft background-attachment

Titelbild Background-attachment.

Mit dieser Eigenschaft können wir das Verhalten unseres Inhalts und Bildes beim Scrollen steuern:

.container {
	background-attachment: scroll;
}

Die drei möglichen Werte von background-attachment sind:

  • scroll
  • fixed
  • local

Wenn wir scroll verwenden, ist das Bild fixiert und wir können unseren Inhalt frei verschieben. Der feste Wert gibt uns einen Parallax-Effekt beim Scrollen mit der Maus und erzeugt lokal mehrere Bilder, solange unser Inhalt nicht endet.

Hier das Ergebnis (Link zu Codepen):

Das Hintergrundbild mit Blick auf eine Bucht am Meer wird eingesetzt, um einen Parallax-Effekt zu erzeugen.

Die CSS-Eigenschaft background-color

Titelbild für „background-color“

Mit Sicherheit eine der am häufigsten verwendeten Hintergrundeigenschaften. Mit ihr lässt sich die Farbe des Hintergrunds eines Elements ändern. Die Farbe kann als Farbname (z.B. „red“) oder in rgb-, hsl- oder hex-Schreibweise angegeben werden:

.container {
	background-color: red;
}

als Hex-Wert:

.container {
	background-color: #ff0000;
}

als rgb() – Wert:

.container {
	background-color: rgb(255, 0, 0);
}

Oder wir können rgba() verwenden, um sowohl die Farbe als auch die Deckkraft wie folgt festzulegen:

.container {
// Die 0.5 am Ende steht für 50% Deckkraft
	background-color: rgba(99, 110, 114, 0.5);
}

Hier ein Experiment mit der Farbe „Eton blue“ mit verschiedenen Deckkraftstufen:

die Farbe Eton Blue in verschiedenen Deckkraftstufen.

und zu guter letzt als linear-gradient() (deutsch: linearer Farbverlauf), hierfür wird allerdings nicht background-color sondern background-image oder einfach nur background verwendet:

.container {
	background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

So legen wir den Farbverlauf mit linear-gradient() fest

Wir können diese Eigenschaft verwenden, um einen Farbverlauf mit mehr als einer Farbe zu erstellen. Hier sind einige Beispiele für Farbverläufe:

6 Farbverläufe die mit background-image: linear-gradient() erstellt wurden.
Mehr zum Thema Tools für Farbverläufe

Nun zum konkreten Beispiel. Wir wollen diesen Hintergrund-Farbverlauf mit background-image: linear-gradient() nachbilden:

Der Farbverlauf „Summer“.

Das ist unser Codeschnipsel:

.container {
	background: linear-gradient(90deg, #22c1c3, #fdbb2d);
}

Die Syntax für Hintergrundbilder in der Kurzform

Im folgenden Beispiel verwenden wir kitty.png auf blauem Hintergrund bei 200px auf der X-Achse und 200px auf der Y-Achse. Der Codeschnipsel sieht wie folgt aus:

.container {
	background-color: skyblue;
	background-image: url('kitty.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 200px 200px;
	height: 100vh;
}

Und die Kurzform (a.k.a. „Shorthand“) davon sieht so aus:

.container {
	background: skyblue url('kitty.png') no-repeat fixed 200px 200px;
	height: 100vh;
}

Diese Kurzform spart uns gleich mehrere Zeilen Code. Wichtig ist es, die Reihenfolge dieser Werte beizubehalten, sonst funktionieren die Angaben nicht mehr. Das Ergebnis sieht dann so aus:

Eine süße Katzenillustration auf blauem Hintergrund im Safari-Browser.

Ein Wort zu Ladezeiten

CSS Hintergrundbilder sind grundsätzlich unvorteilhaft, wenn es um Website-Ladezeiten geht. Sie sind nicht direkt im Markup einer Website enthalten, sondern werden über das CSS ausgeliefert. Das bedeutet, dass erst das CSS geladen sein muss, bevor das Hero Image abgerufen werden kann.

Wenn Du jedoch nicht auf CSS Background Images verzichten kannst, solltest Du folgendes HTML zum Header Deiner Website hinzufügen, sodass der Browser das Hintergrundbild schneller laden kann:

<link
   rel="preload"
   href="https://drweb.de/wp-content/themes/child-theme/images/name-des-hero-images.webp"
   as="image"
   fetchpriority="high" /> 
</head> 

Fazit

Wir hoffen, dass diese Einführung zum besseren Verständnis dieses Themas beiträgt und dem einen oder der anderen als Nachschlagewerk dienen kann.

Dieser Artikel wurde aus dem Englischen übertragen,  technisch editiert und am 14. Sept. 2021 veröffentlicht. Der Artikel erschien zuerst auf Freecodecamp.

Verwendetes Bildmaterial:

  • Cute rabbit with duck
  • Cute cat with duck
  • Cute panda
  • Kitty avatar

 

Joy Shaheb

Joy Shaheb

Joy Shaheb ist Frontend-Entwickler, Youtuber und K-Pop Fan aus Dhaka in Bangladesh.

Lust auf mehr?

  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Oktober 2022

Was kostet eine Website?

Eine gut gestaltete und übersichtliche Internetpräsenz ist das digitale Aushängeschild deines Unternehmens. Ob Freelancer, Start-Up oder mittelständisches Unternehmen – an einer professionellen Onlinepräsenz führt heute kein Weg vorbei. Dabei steigt auch der Anspruch an rein privat genutzte Websites. Wir stellen in diesem Artikel die Kosten vor, die beim Erstellen einer Website zu beachten sind.
  • Webdesign

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑