25 CSS-Hintergründe und nahtlose Strukturen zum Copy& Paste für deine Website

Linien, Karos, Rauten – nahtlose Hintergründe zum Aufpeppen deiner Contentboxen auf deiner Website.

Der Clou: Das Ganze funktioniert komplett ohne Grafiken!

Wie versprochen habe ich heute für euch unglaubliche 25 Codebeispiele für CSS-Hintergründe inklusive Vorschau!

Alle Hintergründe bestehen aus halbtransparenten Mustern, die ihr auf verschiedene Farben legen könnt. Die Vorschau zeigt jeden Hintergrund aus 5 verschiedenen Farbflächen, damit ihr sehen könnt, wie dieser auf verschiedenen Farben in unterschiedlichen Helligkeitsstufen wirkt.

Zu jedem Hintergrund seht ihr einen Link, der euch den Patternify-Editor direkt mit diesen Einstellungen öffnet. Praktisch, oder?

Wozu brauche ich sowas?

Diese kleinen Hintergründe peppen eure Boxen, Überschriften und Teaser gewaltig auf und geben euren Seiten damit mehr Tiefe.

Ich habe beispielsweise den Hintergrund meiner Box für die Registrierung mit kleinen diagonalen Linien hinterlegt:

Klicke hier und werde Mitglied im Style-Club der Ideenlounge und du bekommst alle Grafiken, Codeschnipsel und das Ideenlounge-Style-Plugin zum Download. Alles komplett for free!

Der Hintergrund dieser Box ist mit mit einem Hintergrund von Patternify hinterlegt - ganz ohne Grafik. Und bei der Gelegenheit - meldet euch beim Ideenlounge Style-Clug an - dann erhaltet ihr alle Codeschnipsel und Freebies bequem per Mail - inklusive diversen Premiuminhalten nur für Style-Club Mitglieder.

Die Anmeldung ist unverbindlich und kostenlos und kann jederzeit wiederrufen werden.

Und los gehts – hier kommen die Codebeispiele:

Hier findet ihr den CSS-Code für verschiedene Muster: Karos, Rauten, horizontale Linien, vertikale Linien und ein paar Retro-Styles. In meinem Patternify-Tutorial findet ihr noch weitere Beispiele für diagonale Linien. Diese Strukturen setze ich selbst oft in Webseiten ein. Ich hoffe daher, dass diese Codeschnipsel euch ebenso helfen, wie mir.

1. Pattern karriert, hell

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkIAL8///fh5EIdQyjCvGGEjh4QAQxYQkAi9Ag5cUWsD0AAAAASUVORK5CYII=);

Link zu Patternify: http://ptrn.it/1BTAwKN

2. Pattern karriert, dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYV2NkIA5IMhKnjmFUId6AAgePJDFhCQDDFAEFxaHDgAAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/oeaSm8

3. Pattern karriert, klein, hell

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIW2NkQAP////3YaRQEGQGuhEAFpIQc5htOmUAAAAASUVORK5CYII=);

Link zu Patternify: 0

4. Pattern karriert, klein, dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkwASSjJQLSqIbAQAYMwCD8JJonAAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/Kg1SJU

6. Noch ein karriertes Muster

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2NkYGDwAWJCYAsjVOEWPCpBBqEoxGYyyACsCpFNBivApxBFAcUmovsJq9W4PI7iGaLCkZAisDwAw9QZC/psvzMAAAAASUVORK5CYII);

Link zu Patternify: http://ptrn.it/1BTCMSk

6. Und noch ein karriertes Muster

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAH0lEQVQIW2NkYGCQBGIYeA5jMJIlgWQSwliQUaRJAABXLANS+wBmxgAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1BTDDCi

7. das vorerst letzte karrierte Muster

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIklEQVQYV2P8//+/MQMaYGRkPIshNhQUojsaxMfq7iGgEABwrCP7/f2wVgAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1BTDfnv

8. Rauten hell

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2P8//+/DyMj4xYGHAAmzwiSx6UYWRysEJtidM1whciKsdmAohCfM0g3Ed06rG4kytckhSOuwEYOOgBUlEdUlrsPGQAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1BTFCqp

9. Rauten dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAO0lEQVQYV2NkIAIwAtVIAvFzPGolQYpAAJdCsDhMETaFcI3IipAVopiMrgir1SSbhO54DDcR9B3BcAIAu+IPPVR/nIQAAAAASUVORK5CYII=);

Link zu Patternify: http://ptrn.it/1BTDQpe

10. Rauten hell klein

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAK0lEQVQIW2P8//+/DyMj4xYGKIDxGUF8GAdZEVgCWRLGx60Drx0w7cjGAgCI3idQXNWv8QAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1BTFkzQ

11. Rauten dunkel klein

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2NkYGDwAeItQAwDYD4jlAeThCuCSYDkUXTi1YHXDiS7wUwfAAHMCVMwEJUcAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1HvNhgY

12. Linie horizontal hell

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAGElEQVQIW2P8//+/MSN+ggEIQErSGEEsAPk1Gb5Z7gn6AAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1BTGyuL

13. Linie horizontal hell 2

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAEklEQVQIW2NkAAJGBPH///80AAmjA2ihUKcVAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1BTGrzs

14. Linie horizontal hell 3

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIklEQVQYV2NkIBIwEqmOgfH////GxCgm3kRiTAOpGVYmAgAZXwM7+RiU3wAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1BTGoUi

15. Linie horizontal dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAADElEQVQIW2NkQAXGAABVADWsoJ3RAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1HvNZe8

16. Linie horizontal dunkel2

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAI0lEQVQYV2NkIBIwEqmOAaTQmBjFJJlIjIFgqyWJUTkUFAIAhRAAu4xnPRMAAAAASUVORK5CYII=);

Link zu Patternify: http://ptrn.it/1BTGj2X

17. Linie horizontal dunkel3

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYV2NkIBIwEqmOYVQh3pACBY8xMWEJABHIAD50AbC9AAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1BTG3Rm

18. Linie vertikal hell

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAEElEQVQIW2NkQAL///83BgAJTAMyrRp//wAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1HvNRv9

19. Linie vertikal hell 2

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFElEQVQIW2P8//+/DyMj4xYGAgAAl3YEAhz2KawAAAAASUVORK5CYII=);

Link zu Patternify: http://ptrn.it/1HvNvoo

20. Linie vertikal hell 3

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFklEQVQIW2P8//+/MQMaYGRkPIsuBgCKEgQCRcoXgAAAAABJRU5ErkJggg==);

Link zu Patternify: 0

21. Linie vertikal dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAADElEQVQIW2NkQAXGAABVADWsoJ3RAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1HvNpNr

22. Linie vertikal dunkel2

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAADUlEQVQIW2NkIA4YAwAAhQA1sLQaeAAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1HvO95l

23. Linie vertikal dunkel3

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAGElEQVQIW2P8//+/DyMj43MG3OAsUCoNAKJwBWgeBKM4AAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1HvNCQZ

24. Retro

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQYV2NkIBIw/v//Pw2mlpGRcRa6Ppg8I7IESBBZMTIfRSFIE0wSXROGQmTFyLaRZyJeN5Lla3xBitUz2DQAAIyRMtGjyWc7AAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1HvPoS1

25. Retro 2

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQElEQVQYV2NkQAXGQO5ZIIbRYFlGUhWh6EY2DWQSSBIEQNaAQBoQz4KywXLo1oEUwABMIVgRSSbhdROyB8kPAgAfIRFw4/CeVAAAAABJRU5ErkJggg==);

Link zu Patternify: http://ptrn.it/1HvOTYb

… Fortsetzung folgt…

Das Experimentieren macht richtig Spaß – ich denke, da kommt bestimmt demnächst noch ein weiterer Artikel mit weiteren Varianten 🙂

Tragt euch einfach in meinen Style-Club ein oder folgt der Ideenlounge auf Facebook. Dann verpasst ihr kein Freebie der Ideenlounge.

So bekommt ihr die CSS Schnipsel in euren Blog

Diese Schnipsel setzt ihr in eure style.css in den jeweiligen Container. Ich habe beispielsweise in meinem Theme Twenty Fifteen den Footer der Beiträge, in dem das Datum und die Kategorien stehen mit leichten Linien hinterlegt. Dazu musste ich lediglich folgenden Code der „Linie hell 2“ für die Klasse „.entry-footer“ einsetzen. Das sieht dann in meiner style.css so aus:

.entry-footer {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAEklEQVQIW2NkAAJGBPH///80AAmjA2ihUKcVAAAAAElFTkSuQmCC);}

In meinem Artikel „Einem Wordpress-Theme eigene CSS hinzufügen“ findet ihr eine Anleitung, wie ihre eurem WordPress Theme eigene CSS hinzufügen könnt und wie ihr herausfindet, welcher Code in der CSS-Datei für welches Element auf eurer Webseite verantwortlich ist.

Ciao,

Mirjam

Für alle, die doch einen Hintergrund mit einer größeren Fläche suchen…. Hier eine Auswahl direkt von Shutterstock:

[shutterstock images=12 showkeywords=1 tooltips=1 logo=1 keywords=“seamless Background“  paging=1 header=1 order=random ]

Kommentare

  1. Sandra Stablum 1. Juli 2015 um 10:27 Uhr

    Hallo, ich finde diesen Artikel richtig super. Werde ich gleich mal bei meinem nächsten Projekt ausprobieren.
    Viele Grüße
    Sandra

    • Mirjam 1. Juli 2015 um 13:01 Uhr

      Dankeschön – Ich bin auch ganz begeistert von Patternify – ein bis zwei Strukturen in einzelne Elemente eingebaut, und schon wirkt die Seite wie frisch poliert 🙂

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



[shariff backend="on"]
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz