web-dev-qa-db-ja.com

背景画像はdiv自体より大きくできますか？

100％幅のフッターdivがあります。コンテンツによって異なりますが、約50ピクセルです。

#divにこのdivをオーバーフローさせるような背景画像を与えることは可能ですか？

画像は約800x600pxで、フッターの左下隅に配置する必要があります。それは私のウェブサイトの背景画像のように機能するはずですが、すでに身体に背景画像を設定しています。ウェブサイトの左下隅に別の画像を配置する必要があります。＃footer divはこれに最適です。

#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}

画像はフッターに設定されますが、divをオーバーフローしません。それを実現することは可能ですか？

overflow:visibleは仕事をしません！

cssimagebackground
67
matt

背景画像をそのdivからあふれさせることができるとは思わない。画像タグに配置された画像は親divからオーバーフローする可能性がありますが、背景画像は、背景となるdivによって制限されます。

42
Daniel Bingham

非常に簡単なトリックがあります。そのdivのパディングを正の数に設定し、マージンをネガティブに設定します

#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}
144
transGLUKator

この記事に示すように、css3 psuedo要素を使用できます

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

13
Josh Sells

いいえ、できません。

しかし、確実な回避策として、最初のdivをposition:relativeとして分類し、div::beforeを使用して、画像を含む基本要素を作成することをお勧めします。 position:absoluteとして分類されているため、最初のdivに対して任意の場所に移動できます。

その新しい要素にコンテンツを追加することを忘れないでください。以下に例を示します。

div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}

注：親divの「上」に配置する場合は、代わりにdiv::afterを使用します。

9
ArcTanH

既にbodyに背景画像があることに言及しています。

couldhtmlにその背景画像を設定し、bodyに新しい画像を設定します。もちろんこれはレイアウトに依存しますが、フッターを使用する必要はありません。

4
stephenhay

背景サイズのカバーを使用するとうまくいきました。

#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}

明らかにサポートの問題に注意してください、使用できます： http://caniuse.com/#search=background-size

4
PanPipes

これが役立つ場合があります 。フッターの高さは固定数である必要があります。基本的に、フッターdiv内に通常のコンテンツを持つposition: absolute、次に画像にposition: relative、負のz-indexすべての「下」にとどまり、フッターの高さから画像の高さを引いた負のtop値（私の例では、50px - 600px = -550px）。 Chrome 8、FireFox 3.6およびIE 9。

2
cambraca

実際にはそうではありません-背景画像は適用される要素によって制限され、オーバーフロープロパティは要素内のコンテンツ（つまり、マークアップ）にのみ適用されます。

ただし、フッターdivに別のdivを追加し、そのdivに背景画像を適用して、代わりにオーバーフローさせることができます。

2
hollsk

Transform：scale（1.1）プロパティを使用して、bgイメージを大きくし、position：relativeで上に移動します。上：-10px;

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}
1
Pavlo Kozachuk