www.web-toolbox.netEin neues Browserfenster wurde geöffnet Browserfenster schließen   

Hintergrundgrafik Seite - Demo

Demo für einen sinnvollen Einsatz

Hintergrundgrafik: 1 x 1000 Pixel, links oben ausgerichtet, kein Mitscrollen
(zur Demo rechts breiter dargestellt)


Bis die Hintergrundgrafik vollständig geladen ist
wird die Seite mit den vorgegebenen Farbwert eingefärbt! 
body {
background:url(bg-demo-03.jpg) #000000 top left fixed;
margin:0px;
padding:0px;
}
Die Grafik wird gekachelt!

Das Problem bei Hintergrundgrafiken mit einem Farbverlauf ist die manchmal 'getreppte' Farbdarstellung (erkennbare Pixeltrennung = Streifenbildung), abhängig von der Qualität der Grafik und den vorkommenden Farbwerten.

Eine Mehrfachverwendung einer Seiten-Hintergrundgrafik mit einem Verlauf für diverse Seitenelemente wie <div>- oder Tabellenbereiche, macht sich auf einer Webseite immer ganz gut, weil die Farbabstimmung immer passt.


Titelzeile
Demo für eine Tabelle mit der gleichen Hintergrundgrafik
<table background="bg-demo-03.jpg"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Demo für einen Absatz <p> mit der gleichen Hintergrundgrafik

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis