問題タブ [background-repeat]

私はこのような見出しを作成しようとしています...

題名 - - - - - - - - - -

カスタム画像の背景を持つこの行

HTML :

CSS :

結果 ：

ライブ: http://jsfiddle.net/5G2aq/

この画像を X 軸で繰り返し、左側にパディングを追加してみます。

しかし、それは機能しません、15px機能しません...または何ですか？

PS：単一の要素<h2>、:afterまたは完全な長さの画像でやろうとしないでください

何かトリック？

ここに示す効果を得たいと思います：

http://jsfiddle.net/abalter/k8G3C/

背景画像は透明です。ロゴとテキストのオーバーレイ。

問題は、背景画像を繰り返すことです-y。広いビューポートでは問題ありませんが、ビューポートを狭くすると、テキストが画像の下部を通過します。

私が行った場合：

その後、背景は y 方向に繰り返されますが、すべての子要素も透明になります。子要素なしで画像を透明にする方法が見つかりませんでした。

ビューポートに合わせて拡大縮小するように背景画像をフォーマットしていますが、常に中央に配置されています。画像の中央は常に中央にあります。(「CSS のみの手法 #2」)

助言がありますか？

私は現在、行動喚起ボタンをいくつかデザインしようとしています。動的な幅のボタンを作成しました。これは、左右のコンテナーと、すべてのテキストを保持する中央のコンテナーによって構築されます。

中央の画像は 50 ピクセルで、繰り返します。

私の問題は、画像が <=50px の場合、背景画像の緑色が正しく表示されることです。50px を超えると (背景画像が繰り返されます)、緑色が変化して見えます。

私が間違ったことを誰か知っていますか？

問題を示す 2 つの図を次に示します。

ぼやけたもの: http://d.pr/i/fz2b

正しいもの: http://d.pr/i/cjgp

編集：

私は次のようにしています：

.left と .right の背景が繰り返されません。私の背景画像はオーバーフローでのみ繰り返されます-オーバーフローすると、画像が緑色に変わります。:-)

特定の位置で繰り返される背景画像を停止する CSS の方法はありますか?

HTML:

CSS:

位置 0 で画像を水平方向および垂直方向に繰り返し、繰り返し画像が verticalheight: 400pxに達したときに繰り返しを停止したいのですmax-heightが、背景のみで、.containerDIV を縮小することはありません。

グラデーションの背景でこれを行う方法は知っていますが、.containerDIV が 400px を超える場合に画像の背景を繰り返すための解決策もありますか?

CSS グラデーションの例:

...

今度は、画像で同じことを行い、400px で停止します。

div の上、左、右のポイントで画像が切り取られるという問題があります。設定しないとbackground-repeat: no-repeat;、画像が 3 点だけで繰り返されるので、ぎこちなく感じます。

「X」は、これによって影響を受けないポイントです。

設定background-repeat: no-repeat;すると、それらのポイントが完全に切り取られ、円ではなくボックスのような形になります。

トップは3つの中で最も目立つポイントです

Chomre、Firefox、および Safari でテスト済み。

CSSは次のとおりです。

最後にフィドル: Demo

縦にも横にも繰り返したい背景パターンがあります。background-repeat:repeat;forを使用しbodyて正常に動作しますが、(Viewport Resizer を使用して) ページのサイズをモバイル/タブレット画面に変更すると、背景の一部が白くなります。問題の原因は何ですか?

背景を CSS で実装したところ、ページ全体をカバーしましたが、書きたい内容をカバーするには長さが足りませんでした。背景を繰り返しコピーすると、ページが長くなるのではないかと考えました。background-repeat: y; をコーディングすると、} を CSS に変換すると、必要な長さが得られますが、背景が分割されるため、ページ全体がカバーされません。そのほとんどは白です。私は何を間違っていますか？ありがとう。

HTML:

CSS: