html - 背景画像の中央下部をコンテンツで埋める

Question

私は次のことを行います: 背景画像 (上部中央) があり、その中央下部をコンテンツで埋めます。http://glocalventures.org/のようなことをします。注：サイズ変更可能です！

どうすればこのようなものを作ることができますか? 私は、Zurb Foundation を CSS フレームワークとして使用しています。ありがとう！

score 0 · Accepted Answer

あなたがここで何を求めているのかよくわかりません。このサイトに似た背景画像を作ることについて話していると思いますか？

CSSを介して背景画像/背景位置を制御します。あなたはこのようなことをすることができます：

body {
background-image:url(../images/bg.jpg);
background-position: top center ;
background-repeat:none;
}

または、ピクセルを使用できます

body {
background-image:url(../images/bg.jpg);
background-position: 100px 100px ;
background-repeat:none;
}

またはパーセンテージが必要な場合

body {
background-image:url(../images/bg.jpg);
background-position: 50% 50%;
background-repeat:none;
}

サイズを変更するには、次のCSSプロパティを使用できます。

background-size:100% 100%;

*注これはCSS3プロパティであり、一部の古いブラウザでは機能しません。

これがあなたが探しているものではない場合。あなたは彼らのサイトを右クリックしてソースコードを介して彼らのCSSを表示し、彼らがそれをどのように行っているかを見ることができます。

score 0 · Accepted Answer

画像を上部中央に設定します。

yourImage{
   background: #ffffff url(../images/bg.jpg) top center no-repeat;
}

テキストの移動先を設定します。

yourText{
    position: absolute;
    bottom: 5px;
    text-align: center;
}

およびこれの HTML コード:

<div id="yourImage">
    <p id="yourText">some text...</p>
</div>

2 に答える 2