\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Der Exilant (The Exilant)}
\pdfinfo{
  /Title (css-background-properties.pdf)
  /Creator (Cheatography)
  /Author (Der Exilant (The Exilant))
  /Subject (CSS Background Properties Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{116B8A}
\definecolor{LightBackground}{HTML}{F0F5F7}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{CSS Background Properties Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Der Exilant (The Exilant)} via \textcolor{DarkBackground}{\uline{cheatography.com/26169/cs/7841/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Der Exilant (The Exilant) \\
  \uline{cheatography.com/the-exilant} \\
        \uline{\seqsplit{www}.pixel-anarchy.de}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 15th April, 2016.\\
   Updated 10th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Hintergrundfarbe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Die Farbe des Hintergrunds wird entweder mit einer RGB-Definition, mit einer Hex-Definition oder mit gültigen Farbnamen definiert. \newline % Row Count 3 (+ 3)
Gültiger Farbname: „z.B. „red", „white", „black", „maroon", etc. \newline % Row Count 5 (+ 2)
RGB-Farbwert: rgb(0,255,168) \newline % Row Count 6 (+ 1)
Hex-Farbwert: \#fff, \#f00, 000, etc. \newline % Row Count 7 (+ 1)
Beispiel: \newline % Row Count 8 (+ 1)
`background-color: \#fff;` \newline % Row Count 9 (+ 1)
Eine Hintergrundfarbe ersteckt sich grunds{\"a}tzlich über die komplette Fl{\"a}che.% Row Count 11 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verl{\"a}ufe als Hintergrundfarbe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Es gibt sowohl die M{\"o}glichkeit einen linearen (geradlinig) als auch einen radialen (kreisf{\"o}rmigen) Verlauf mittels CSS zu erzeugen.  \newline % Row Count 3 (+ 3)
Der Syntax hierfür ist… \newline % Row Count 4 (+ 1)
`background: linear-gradient(Richtung,Color-stop1,Color-stop2,...);` \newline % Row Count 6 (+ 2)
Besch{\"a}ftigen wir uns mit den Attributen für die Eigenschaft. Als erstes kommt die Richtung, den der Verlauf besitzen soll. Standard ist von oben nach unten und muss daher nicht angegeben werden. Gefolgt wird diese von den Farbdefinitionen. Nutzt man zwei color-stops, so entsteht ein Verlauf von Farbe eins zu Farbe zwei. \newline % Row Count 13 (+ 7)
M{\"o}gliche Angaben für den Start der Richtung des Verlaufes {[}alphanummerisch{]} sind: {\bf{top | bottom | left | right}} \newline % Row Count 16 (+ 3)
Aber man kann nicht nur horizontale oder vertikale Verl{\"a}ufe damit erzeugen. Kombiniert man die Angaben z.B. top left, so verl{\"a}uft der Verlauf von oben links, nach unten rechts. Richtungen k{\"o}nnen aber nicht nur alphanummerisch und somit in Schritten von 45° definiert werden, sondern auch durch die Angabe von Winkelgraden. Standard sind 180° (180deg)% Row Count 24 (+ 8)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Sollte es bei deinem Browser nicht funktionieren, dann verzweifle nicht sofot. Eventuell musst du nur den entsprechenden Vendor-Pr{\"a}fix voranstellen. Der Vendor-Prefix wird vor das linear-gradient gesetzt und dies sieht dann z.B. so \newline  background: \seqsplit{-webkit-linear-gradient(..)} \newline  aus.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verlaufsrichtung: top}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460706846_top2bottom.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(top, \#000, \#ff1200);`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verlaufsrichtung: left}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460707581_left2right.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(left, \#000, \#ffa200);`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verlaufsrichtung: top left}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460708060_topleft.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(top left, \#000, \#ffa200);` \newline  \newline Erzeugt einen Verlauf von links oben nach rechts unten.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verlauf mit positionierten Colorstops}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460707982_black25orange75.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(left, \#000 25\%, \#ffa200 75\%);` \newline  \newline Erzeugt einen Verlauf, der bis 25\% rein Schwarz ist und bis 75\% nach Orange verl{\"a}uft. Ab da sind die restlichen 25\% rein Orange.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Multicolorstops}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Verl{\"a}ufe sind nicht nur von einer zu einer anderen Farbe erlaubt. Es k{\"o}nnen beliebig viele Farben hintereinander angeordnet werden. Hierfür werden die Color-Stops einfach durch kommas getrennt. \newline % Row Count 4 (+ 4)
Ebenso, wie bei Verl{\"a}ufen mit zwei Farben, k{\"o}nnen bei Multicolorstops die Farben positioniert werden. Dies funktioniert genau so wie bei nur zwei Colorstops.% Row Count 8 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Multicolorstops}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460709144_BlackRedOrange.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(left, \#000, \#f00, \#ffa200);` \newline  \newline Erzeugt einen dreifarbigen Verlauf von links nach rechts mit den Farben Schwarz, Rot und Orange. \newline Solange keine Positionierungen angegeben werden, werden die Colorstops gleichm{\"a}{\ss}ig über die zu füllende Fl{\"a}che verteilt.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Multicolorstops mit 5 Farben jeweils bei 25\%}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460709434_5colors25percent.jpg}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{`background: linear-gradient(left, \#000 0\%, \#ff0 25\%, \#f00 50\%, \#ff0 75\%, \#ffa200 100\%);`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{sich wiederholende Verl{\"a}ufe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Als letzten Punkt kümmern wir uns um Verl{\"a}ufe, die sich mehrfach in einem Element als Hintergrundbild wiederholen. Hierzu verwenden wir das prefix repeating- vor der linear-gradient() oder radial-gradient() Definition. \newline % Row Count 5 (+ 5)
Bsp: \newline % Row Count 6 (+ 1)
`background: \seqsplit{repeating-linear-gradient(top}, \#000, \#ffa200 10\%, \#fff 20\%);`% Row Count 8 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Auch bei repeating- ben{\"o}tigt man die Vendor-prefixe -webkit-|-moz-|-o-|-ms- für die verschiedenen Browser Engines. Die Eigenschaftendefinition kann also reichlich lang werden. \newline Das ergebnis kann, wenn man sich bei der Farbwahl zu ernsthaften Augapfelprellungen und/oder zu epileptischen Anf{\"a}llen führen. \newline {\bf{Ihr wurdet also gewarnt!}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Bsp. sich wiederholende Verl{\"a}ufe}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460711309_multistops-repeated.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{All together now...}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460711412_alltogether.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Jetzt die Hardcore Variante mit 5 Colorstops an verschiedenen Positionen mit transparenz. \newline  \newline `background: linear-gradient(left, rgba(0,0,0,1) 0\%, rgba(255,255,255,0) 40\%, rgba(255,255,255,1) 50\%, rgba(255,255,255,0) 60\%, rgba(0,0,0,1) 100\%);`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verl{\"a}ufe mit Transparenz}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Verl{\"a}ufe k{\"o}nnen sogar mit Transparenzen erstellt werden. \newline % Row Count 2 (+ 2)
Um Transparenz zu verwenden, muss man die rgba()-Funktion bei den Color-stops einsetzen. Der letzte Parameter bei der rgba()-Funktion gibt den Transparenzfaktor an, als einen Wert zwischen 0 und 1. 0 bedeutet 100\% transparent, 1 bedeutet 0\% transparent. \newline % Row Count 8 (+ 6)
\seqsplit{`linear-gradient(Verlaufsrichtung}, rgba(rotanteil,grünanteil,blauanteil,transparenz), rgba(rotanteil,grünanteil,blauanteil,transparenz));`% Row Count 11 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Bsp (von 0\% schwarz nach 100 wei{\ss}): \newline `linear-gradient(left, rgba(0,0,0,0), rgba(255,255,255,1));`}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Verlauf mit transparenz}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/the-exilant_1460709902_black2white.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Verlauf von 0\% schwarz nach 100 wei{\ss}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Hintergrundbilder}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Um ein Bild als Hintergrund zu setzen, ben{\"o}tigt man die Eigenschaft background-image. Die Definition des Hintergrundbilders hat den Syntax \seqsplit{url(…/pfad/zur/bilddatei}.png'); \newline % Row Count 4 (+ 4)
Beispiel: \newline % Row Count 5 (+ 1)
`background-image: \seqsplit{url('../pfad/zur/bilddatei.png');`} \newline % Row Count 7 (+ 2)
Für Hintergrundbilder gibt es noch weitere Eigenschaften, die definiert werden k{\"o}nnen, z.B. dessen Gr{\"o}{\ss}e, ob sich ein Hintergrundbild wiederholt, oder nicht, wie es positioniert ist, ob es mitscrollt, oder fixiert angezeigt wird. Behandeln wir diese Eigenschaften genauer. Die Eigenschaften für Hintergrundbilder sind: \newline % Row Count 14 (+ 7)
background-repeat \newline % Row Count 15 (+ 1)
background-position \newline % Row Count 16 (+ 1)
background-attachment \newline % Row Count 17 (+ 1)
background-origin \newline % Row Count 18 (+ 1)
background-clip \newline % Row Count 19 (+ 1)
background-size% Row Count 20 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{background-repeat}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Von Haus aus wird ein Hintergrundbilder sowohl horizontal als auch vertikal wiederholt. Eingrenzen oder ganz abschalten kann man diese Wiederholungen mit der Eigenschaft background-repeat. Die dazugeh{\"o}rigen Definitionen sind {\bf{repeat|no-repeat|repeat-x|repeat-y.}} \newline % Row Count 6 (+ 6)
Ist die Definition no-repeat gesetzt, wird der Hintergrund nur ein einziges mal angezeigt. \newline % Row Count 8 (+ 2)
Ist die Definition repeat-x gesetzt, wird das Hintergrundbild nur horizontal wiederholt. \newline % Row Count 10 (+ 2)
Ist die Definition repeat-y gesetzt, wird das Hintergrundbild nur vertikal wiederholt.% Row Count 12 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Die Definition repeat ist das Grundverhalten von Hintergrundbildern. Solange nicht anders definiert, werden Hintergrundbilder sowohl horizontal als auch vertikal wiederholt.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{background-position}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Mit der Eigenschaft background-position k{\"o}nnen wir bestimmen, wo ein Hintergrundbild angezeigt wird. Standardeinstellung ist, dass Hintergrundbilder links oben beginnen und dann sowohl horizontal als auch vertikal wiederholt werden. Der Syntax erlaubt, dass man zwei Werte setzen kann. Der erste Wert definiert die horizontale Ausrichtung, der zweite Wert definiert die vertikale Ausrichtung. Weiter gibt es mehrere Wertesysteme mit der die Ausrichtung definiert werden kann. \newline % Row Count 10 (+ 10)
Alphanummerische Ausrichtung: \newline % Row Count 11 (+ 1)
Das bekannteste ist sicherlich die Ausrichtung mit alphanummerischen Werten. \newline % Row Count 13 (+ 2)
Horizontal: {\bf{top | center | bottom}} \newline % Row Count 14 (+ 1)
Vertikal: {\bf{left | center | right}} \newline % Row Count 15 (+ 1)
Ausrichtung mit Prozentwerten: \newline % Row Count 16 (+ 1)
Es ist aber auch m{\"o}glich mittels Prozentwerten ein Hintergrundbild zu positionieren. Der erste Wert bestimmt die horizontale Ausrichtung, der zweite Wert die vertikale. Die Werte 0\% 0\% positionieren das Hintergrundbild oben links, 100\% 100\% positionieren es unten rechts. Wird nur der horizontale Wert gesetzt, ist der vertikale Wert automatisch 50\%. \newline % Row Count 24 (+ 8)
Ausrichtung mit fixen Werten: \newline % Row Count 25 (+ 1)
Wie schon im vorhergehenden Beispiel mit Prozentwerten, k{\"o}nnen Hintergrundbilder auch mittels fixen Werten positioniert werden. Dabei kann jede CSS-Ma{\ss}einheit verwendet werden. Auch ist es m{\"o}glich alphanummerische Angaben, Prozentwerte und  fixe Werte zu mischen. Wird nur ein Wert angegeben, so ist die vertikale Ausrichtung standardm{\"a}{\ss}ig mittig im Element.% Row Count 33 (+ 8)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{background-size}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Gleich eine Vorbemerkung. Setzen des Wertes background-size ist sinnvoll, wenn man dazu die Vendor Pr{\"a}fixe ebenfalls setzt. Laut dem W3c kann Chrome die Eigenschaft ab Version 1.0 (ab 4.0 ohne Pr{\"a}fix), Edge ab Version 12.0, der IE ab V. 9.0, Safari ab 4.1 (ab 3.0 mit Pr{\"a}fix -webkit-) und Opera ab 10.5 und der Firefox ab V. 4.0 (mit Pr{\"a}fix -moz- ab V. 3.6 \newline % Row Count 8 (+ 8)
Die Werte für background-size sind {\bf{auto | length | percentage | cover | contain | initial | inherit}}% Row Count 11 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Der Standardwert ist auto}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{background-attachment}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Die Eigenschaft {\emph{background-attachment}} bestimmt ob ein Hintergrundbild fest positioniert ist, oder mit dem Inhalt mitscrollt. Ich habe hier absichtlich nicht Seiteninhalt sondern nur Inhalt geschrieben, weil es hier einen Unterschied gibt. Es gibt eine Definition, welche das Scrollverhalten bezüglich auf das umschlie{\ss}ende Element regeln und auf die gesamte Seite. \newline % Row Count 8 (+ 8)
{\bf{fixed}} /{\emph{fixiert an der definierten Position}} \newline % Row Count 9 (+ 1)
{\bf{scroll}} /{\emph{scrollt mit (Standardverhalten)}} \newline % Row Count 10 (+ 1)
{\bf{local}} /{\emph{scrollt entlang des Elementinhaltes}} \newline % Row Count 11 (+ 1)
{\bf{inherit}} /{\emph{Erbt die Eigenschaften des Elternelementes}}% Row Count 13 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{background-origin/clip}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Die Eigenschaften background-origin und backbground-clip in Kombination ergeben eine Vielzahl an interessanten M{\"o}glichkeiten um die Platzierung eines Hintergrundbildes zu bestimmen. \newline % Row Count 4 (+ 4)
Mit background-origin legt man fest, wo sich die obere linke Ecke eines sich nicht wiederholenden Hintergrundbildes befinden soll.% Row Count 7 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Ein sch{\"o}nes Beispiel findet sich bei SelfHTML: \newline https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS3\_background-origin.html}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Kurzform}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Sowohl die Eigenschaft background-color als auch background-image k{\"o}nnen in Kurform ausgedrückt werden. Der Browser sollte dann trotzdem in der Lage sein aus den Werten das gewünschte Erscheinungsbild zu erzeugen. \newline % Row Count 5 (+ 5)
Bsp: \newline % Row Count 6 (+ 1)
`background: \seqsplit{url("../pfad/zur/bildatei.png")} linear-gradient(top,\#54C9F0  ,\#0CB9F2) no-repeat top center cover;` \newline % Row Count 9 (+ 3)
In diesem Beispiel haben wir sowohl ein Hntergrundbild, als auch einen Verlauf, von oben nach unten, definiert. Das Hintergrundbild wird nicht wiederholt, oben und mittig ausgerichtet und soll den gesamten Viewport abdecken.% Row Count 14 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Nicht immer funktioniert die Kurzform zur Zufriedenheit auf allen Browsern, daher empfiehlt es sich die Langform zu verwenden.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}