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

patternify2

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:

Kommentare

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

    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

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

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed