All Articles Web
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!

ステップ1

まず最初の最初 - 我々は、タイルのグラフィックを必要とする!おそらくこれを行う最良の場所はにありますPhotoshopの 。それは透かし、ロゴ、または実際にあなたが好きなものとして現れるだろうように、軟化グラフィックを使用することができます。グラフィックが大きすぎるではないことを確認し、PNG、JPEG、またはGIFとして保存します。今、私たちは私たちのレイアウトでそれを使用する準備が整いました。

ステップ2

次に、我々はCSSを経由して私たちのレイアウトにグラフィックをロードします。これは、ハンドコーディングの少しを必要としますが、それはやってのけるには余りにも難しいものではありません。まず、に背景グラフィックを適用したいCSSルールを見つけます。これは、div要素、クラスのルール、またはあなたが使用されているかもしれない他のルールを制御しているIDセレクタである可能性があります。私の例では、再定義、body要素に背景グラフィックを適用するつもりです。

フルコロン、その後、"URL"に続いて"背景画像"プロパティに追加します。セミコロンに続くあなたのグラフィックへのパスの後、括弧内、入力、。例えば、私のコードがどのように見えるかは以下の通りです:

背景画像:のURL(画像/ Background.png);

私のグラフィック、"Background.pngが"という名前のフォルダ内部に配置されていることに注意してください"のイメージ。"ファイルを保存し、ブラウザであなたの仕事をプレビューしてください。デフォルトではどのような背景のグラフィックタイルに注意してください。我々は物事をあるがままに残す、または追加のCSSプロパティを使用して、さらに物事をカスタマイズし続けることができます。

ステップ3

あなたがタイルの動作を制御したい場合、あなたは"はbackground - repeat"プロパティで追加することができます。その後、"リピート- X、""リピート- yを、"または"、繰り返す"に値を設定することができます"ノー繰り返しを。"リピート- xとは、繰り返しがタイルを許可しませんしながら、唯一の水平または垂直方向にタイルリピート- yの力。

ステップ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: