いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。

添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。

自分が試した方法です。
html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。

html {
background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x;
}

body {
background: url(../img/share/bg_t.jpg) center top no-repeat,
url(../img/share/bg_m.jpg) center center repeat-y;
}

#wrapper {
margin:0 auto;
width: 960px;
background-color:#FFFFFF;
}

「CSSで複数の背景画像を実装する方法」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちは


もう解決しているかもしれませんが、一応。


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-16" />
<meta http-equiv="content-Language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<title>ホームページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="discription" content="コンテンツの概要" />
<meta name="author" content="名前" />
<meta name="copyright" content="著作権" />
<style>
*{
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-image: url(フォルダ/ファイル.jpg) repeat-y top center;
}
#Top-bgimage{
width: 100%;
height: 200px;
background-image: url(フォルダ/ファイル.jpg) no-repeat top center;

}
#wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
top: 0;
}
#content {
margin:0 auto;
padding: 0;
width: 800px;
height: 100%;
background:white;
}
#footer {
width:100%;
height: 100px;
margin: 0;
padding: 0;
background:#000000;
text-align:center;
}
</style>
</head>
<body>
<div id="Top-bgimage"></div>
<div id="wrapper">
<div id="content">コンテンツ</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>


こんな感じです。参考になればいいのですが。
    • good
    • 0
この回答へのお礼

急遽下方向へのリピートは辞めることになり無事納品することができました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。

ご丁寧にありがとうございました!!!

お礼日時:2011/05/08 01:02

画像の位置の発想を逆にすると・・・



1、グラデ画像と赤円(上画像)を一体化。
2、青円(下画像)を最背景にして、赤円(上画像)を被せる。
3、青円(下画像)は最背景で全面縦リピートするが、
 赤円(上画像)とfooterで隠れて見えなくなるから、
 header画像の真下からfooterの手前までしか伸びていないように見える。
------------------

body { margin:0; padding:0;
background:#E4E4E4 url(下画像.gif) 50% ●px repeat-y;}
#body2 {
background: url(上画像.gif) 50% 0 repeat-x;}
#wrapper {
margin:0 auto; width: 960px; background:white;}
#footer {
background:#E4E4E4 url(上画像.gif) 50% 100%;
width:100%; text-align:center;}

<body>
<div id="body2">
<div id="wrapper">コンテンツ</div>
<div id="footer"><p>footer</p></div>
</div>
</body>

<!--
※ 上画像制作時に色付で適当な高さを確保して保存。
 グラデの一体化が無理なら<body>と<div id="body2">の間に
 <div id="body1">として、グラデ画像を咬まし、repeat-x。
 その場合は、<div id="body2">は、no-repeat。
※ 下画像は最背面で、縦座標の●pxは上画像自体の高さ。
※ footerは上画像の下部を再利用するか、画像無しで統一の背景色だけでもOK。
-->
「CSSで複数の背景画像を実装する方法」の回答画像1
    • good
    • 0
この回答へのお礼

今回は下方向へのリピートは辞めることにしました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。

ありがとうございました!!!

お礼日時:2011/05/08 01:01

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q画像を縦に4つ並べたい場合

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

Aベストアンサー

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="...続きを読む

Q画像横のテキストをセンターに配置したい

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキストが2行になると画像の下にずれ込みます。

しかし(2)のようにテキストをセンターに配置したいなと。
テキストは多くても2行でとどめるつもりなので、
1行でも2行でもセンターになるようにしたい。
ではと思ってまず思い浮かんだのが画像を「float: left」すること。
でもそうするとテキストがベースラインから回避できますが、
センターにはいかず、画像のトップと同じ位置に配置されます。

テキストが1行なら、反強制でPタグでくくって
「margin: top」で調整することもできるかと思いましたが、
2行分は設定したいのです。

ちなみに画像のサイズは指定しておりますが、
li自体には横幅の設定はしていますが高さ設定はしていません。
実質画像の高さが高さになることになります。

簡単にできることかと思っていたのですが、思いのほか苦戦しております。
ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。
よろしくお願いいたします。

HTML5, CSS3をベースに、添付画像(2)のような状態で作成したいなと思っております。

<ul>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○○○○○○</a></li>
<li><a href="#"><img src="XXX.gif" alt="#" width="60" height="60">○○○○○</a></li>
</ul>

HTMLはこんな感じでシンプルに。
特に何もしなければ、
(1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。
テキ...続きを読む

Aベストアンサー

いわゆるtableで言うところの、vertical-align="middle" ですよ。
難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style media="screen">
<!--
header nav ul{
list-style:none;
display:table;
border-collapse:separate;
border-spacing:3px;
width:200px;
margin:0 auto;
padding:0;
position:relative;
}
header nav ul li{
display:table-row;
}
header nav ul li a{
vertical-align:middle;
display:table-cell;
border:black 3px solid;
padding:2px 2px 2px 64px;
width:140px;
height:56px;
color:white;
background-color:black;
}
header nav ul li a:before{
position:absolute;
left:6px;
}
header nav ul li a[href="./a"]:before{content:url(./images/aa.gif);top:6px;}
header nav ul li a[href="./b"]:before{content:url(./images/bb.gif);top:75px}
header nav ul li a[href="./c"]:before{content:url(./images/cc.gif);top:144px}
header nav ul li a:hover{color:yellow;}
header nav ul li a:active{color:red;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="./a">あいうえおかきくけ</a></li>
____<li><a href="./b">こさしすせそたちつてとなにぬね</a></li>
____<li><a href="./c">のはひふへほ</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
__<aside>
___<h2>Something aside</h2>
__</aside>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>

いわゆるtableで言うところの、vertical-align="middle" ですよ。
難しく考えないで、そのまま率直に、スタイルシートを書けば良いです。

個人的には、HTML5は古いブラウザには利きませんので、HTML4.01strictで十分だと思います。
サンプルはHTML5 + CSS2.1 です。文字コードはUTF-8
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
で検証済み
★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name=...続きを読む


人気Q&Aランキング

おすすめ情報