Nacrons Weblog

2 Hintergründe in CSS

Benedikt.Rausch — Mon, 20 Apr 2009 23:17:46 +0000

Hey ich schreib mal wieder was,

und zwar hab ich was tolles rausgefunden man kann 2 verschiedene hintergrundelemente im body platzieren um so 2 elemente im hintergrund zu haben die nicht gescrollt werden (z.B. ein Muster und eine Headergrafik die übergroß ist).

das codeschnipsel sieht folgendermaßen aus:

html
{
background-image: url(’gfx/body_bg.jpg’);
background-repeat: both;
}

body
{
background-image: url(’gfx/head.jpg’);
background-repeat: no-repeat;
background-position: center top;
}

Ich hoffe hier manchem geholfen zu haben!

CSS 1px Background Shift Mozilla & Safari

Benedikt.Rausch — Wed, 15 Oct 2008 11:47:12 +0000

Hallo erstmal an alle!

also als ich gerade eine Seite für einen Kunden fertig gemacht habe bin ich auf ein problem gestoßen:

Wenn bei Mozilla Firefox die Scrollbalken zu sehen sind verschiebt sich der mittig zentrierte Background um einen Pixel. Ohne Scrollbalken alles super…

Also nochmal zum Verständniss:

Ausgangslage ein Wrap der mit margin: 0 auto; zentriert wird, ein Hintergrundbild das mit background-position: center; zentriert wird. Ohne Scrollbalken alles klar, mit sind diese Unterschiedlich verschoben.

Hier die Lösung (leider ein Javascript):

html {
	margin-left: -1px;
	overflow-Y: scroll;
}

Für Opera müssen wir noch ein bischen “härter” ran gehen.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body *{ margin-left: -1px;}
}

Die neue lösung wurde gefunden bei: http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

Danke Sohtanaka

Gewinnspiel für das Buch Fortgeschrittene CSS-Techniken

Benedikt.Rausch — Fri, 05 Sep 2008 08:23:13 +0000

Das Webstandartsblog veranstaltet ein Gewinnspiel zum Buch “Fortgeschrittene CSS-Techniken”.

Das Buch wurde geschrieben von von Ingo Chao und Corina Rude.

Die Leseprobe, welche hier zu finden ist, liest sich schonmal einwandfrei.

Wer auch am Gewinnspiel teilnehmen will sollte sich hier informieren.

Reanimieren des Blogs

Benedikt.Rausch — Tue, 01 Jul 2008 08:08:17 +0000

Naja der letzte Beitrag ist schon wieder ne Weile her.

Aber ich denke jetzt wirds langsam Zeit die ganze Geschichte wieder zu benutzen.

Grund dazu, ich habe mich jetzt dazu entschieden Digital Media zu studieren und nicht Wirtschaftsinformatik!

Ich hoffe, dass es die richtige Entscheidung ist. Aber ich bin zuversichtlich.

Themen des reanimierten Blogs werden sein:

Lustiges und Kreatives
Tutorials bzw. Lösungen die ich gefunden habe und nützlich sind
CSS, XHTML, Typographie, Fotographie

Ich hoffe ich kann mindestens 2 Blogeinträge pro Woche raushauen.

Der Nacron