All Articles Web
Einrichten Tiled Backgrounds Verwendung von CSS
Geoff Blake on Wed, April 27th | 0 comments
Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are som

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Schritt 1

Das erste, was der erste - wir brauchen eine Grafik zu kacheln! Wahrscheinlich der beste Ort, um dies zu tun ist in Photoshop . Sie können eine Grafik aufgeweicht, so dass es als Wasserzeichen, ein Logo, oder wirklich alles, was Sie möchten, werden angezeigt. Achten Sie darauf, die Grafik ist nicht allzu groß, und speichern Sie es als PNG, JPEG oder GIF. Jetzt sind wir bereit, sie in unserem Layout verwenden.

Schritt 2

Als nächstes werden wir die Grafik in unserem Layout Last über CSS. Diese werden benötigt ein wenig Hand-Codierung, aber es ist noch nichts zu schwierig zu ziehen aus. Zuerst suchen Sie die CSS-Regel, die Sie gerne in den Hintergrund Grafik anwenden möchten. Dies könnte ein ID-Selektor, der Steuerung eines div-Element, eine Klasse Regel, oder jede andere Regeln, die Sie im Einsatz haben, könnte das sein. In meinem Beispiel werde ich eine Hintergrundgrafik auf einer neu definierten body-Element gelten.

Fügen Sie in die "background-image"-Eigenschaft, von einem Vollzeit-Doppelpunkt, dann "url". Dann in Klammern geben den Pfad zu Ihrer Grafik, durch ein Semikolon gefolgt. Zum Beispiel, hier ist, wie mein Code aussieht:

background-image: url (images / background.png);

Beachten Sie, dass meine Grafik "background.png" in einem Ordner namens befindet "Bilder". Achten Sie darauf, Ihre Dateien zu speichern und eine Vorschau Ihrer Arbeit in Ihrem Browser. Beachten Sie, wie die Grafik im Hintergrund Fliesen standardmäßig. Wir verlassen konnte Dinge wie sie sind, oder fahren Sie die Dinge weiter anpassen durch zusätzliche CSS-Eigenschaften.

Schritt 3

Wenn Sie möchten, dass die Fliesen Verhalten zu steuern, können Sie in der "background-repeat"-Eigenschaft hinzufügen. Sie können dann den Wert auf "repeat", "repeat-x", "repeat-y" oder "no-repeat". Repeat-x und repeat-y Kraft Fliesen nur horizontal oder vertikal, während no-repeat nicht erlaubt, Fliesen.

Schritt 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: