web-dev-qa-db-ja.com

2つの背景画像を追加する方法-中央の列から左と右

私はこのCSSを持っています：

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

そしてこのhtml：

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

中央の列の幅を変更せずに中央の列から左右に2つの画像を追加する必要があり、画像がページ全体の幅に影響を与えなかった。例：

Example Image

画像を追加することができ、いくつかの試みをしました

  1. ブラウザの幅を変更しようとすると、背景画像が中央の列の下に表示されます Image

  2. 変えようとしたmin-width:1020px; to min-width:1665px;-一見、すべてが順調ですが、画面の解像度では-1665px未満の場合、すべてのコンテンツが右にシフトしますいくつかのオプションを試しましたが、失敗しました

私の質問：ブラウザの幅を変更するときに中央の列の左右の距離を減らすように画像を配置します（これは背景画像がない場合のデフォルトの動作です）

これは画像の例を含むコードです。

1020pxの空白の中央部分で1つの大きな画像を作成し、そこに私の左/右の画像を配置すると、動作しますか？

htmlcsscss3positioningbackground-image
8
Vasiliy Terkin

複数のソリューションに従うことができます：

1）divを使用：[good]

Divの適切な「フレームワーク」を作成すると、たとえば次のような問題を解決できます。

<div id="allWrapper">
 <div id="leftSidebar"></div>
 <div id="centerOrContent"></div>
 <div id="rightSidebar"></div>
</div>

そしてCSSの疑似コード（テストされていません）：

div#allWrapper{
 width: 100%;
 height: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 background-position: center right;
}
etc...

次に、CSS（フローティングとサイズ）で遊んで、ビューを調整できます。

2）複数の背景を使用：[常に良いとは限りません]

このCSS疑似コードを使用して、複数の背景を使用できます（ここにあります： http://www.css3.info/preview/multiple-backgrounds/ ）

div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

3）静的な「大きな」画像を使用：[遅延ソリューション]

推奨されるように静的な画像を使用して（中央に空白を入れて）問題を解決することもできますが、Webサイトが「反応する」場合、画面の解像度が異なる（またはブラウザウィンドウのサイズが変更される）とグラフィックの問題が発生する可能性があります。この場合、中央の列の位置と幅も固定する必要があります（ウィンドウのサイズ変更時）。

4）レスポンシブデザインを使用：[優秀-やる！]

中央の（コンテンツ）divで画像が重複しないようにするには、（このdivの）背景色を白に設定します。

ここでも、重複を避けるために、「特別な」レスポンシブCSSを設定できます。これにより、ウィンドウの幅がXより小さいかどうかが検出され、2つの画像が消えます。たとえば、次のCSS擬似コードを使用します。

@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
 div#example {
   background-image: url(oneBackground);
 }
}

@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
 div#example {
   background-image: none;
 }
}

レスポンシブデザインに関するリンクは次のとおりです。

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

19
damoiser

2つの背景を持つ2つの絶対DIVを使用できます。 1つの左中央ともう1つの右中央：

サイトの好きな場所にDIVを配置します。 （絶対に配置されている）

HTML：

<div class="background" id="background1"></div>
<div class="background" id="background2"></div>

CSS：

.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#background1{
    background: url(yourImage1.jpg) no-repeat 100% 0;
}

#background2{
    background: url(yourImage2.jpg) no-repeat 0 0;
}
3
Alvaro

これは私にとっては実用的なコードです。変更されるのは、両方のプロパティのbackground-positionだけです。

.image-bg-custom1 {
    background-image: url(/images/left-get.png);
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.image-bg-custom2 {
    background-image: url(/images/right-get.png);
    background-repeat: no-repeat;
    background-position: center right;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
0
iFart