Q&A
何がどのようにかぶっているかが提示のコードだけではわかりにくいです。どの要素がどの要素にかぶっているかをスクリーンショットなどを使って説明していただけませんか？
###前提・実現したいこと
かぶっている画像の位置をかえたい
###発生している問題・エラーメッセージ
cssの背景画像がhtmlのjpgにかぶってしまう
###該当のソースコード
html
1<!doctype html> 2<html lang="ja"> 3<head> 4 <title></title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7</head> 8<body> 9 <div id="body"> 10 <header> 11 12 </header> 13 <div id="menu"> 14 <ul> 15 <li><a href="index.html"></a></li> 16 <li><a href="what.html"></a></li> 17 <li><a href="yotei.html"></a></li> 18 <li><a href="access.html"></a></li> 19 <li><a href="rule.html"></a></li> 20 <li><a href="tanosiku.html"></a></li> 21 <li><a href="contact"></a></li> 22 </ul> 23 </div> 24 <div id="all"> 25 26 <h1 id="title"><a href="index.html"><img src="images/title.jpg" width="593" height="145" alt="タイトル"</a></h1> 27 </div> 28 <div class="main"> 29 </div> 30 31 32 </div> 33</body> 34</html> 35
css
1@charset "utf-8"; 2 3#menu { 4 float: left; 5 width: 350px; 6} 7 8#all { 9 float: right; 10 height:1000%; 11 width: 100%; 12 margin: 0 0 0 -350px; 13 14} 15 16h1#title { 17 float: right; 18 width: 100%; 19 margin: 0 0 0 350px; 20 position: fixed; 21 background-image: url("../images/main.jpg"); 22 background-repeat: no-repeat; 23 background-position: 0 0 200px 0; 24} 25
###補足情報(言語/FW/ツール等のバージョンなど)
言語css、html/ツールatom
コーディング初心者でちゃんと説明できてるかわかりませんが、よろしくお願いします。
「下」の意味が曖昧です. 「JPEG画像の背後にJPEG背景を配置したが透過しない」のか「JPEG画像の下の位置にJPEG背景を表示したい」のか読み取れません. また「要素」の用語の使い方が混乱を招いています.
説明不足ですみません。jpg画像の下の位置にjpg背景を表示したいです。もっと解りやすく言うとtitle.jpgの下側の位置にかぶらないようにmain.jpgを表示させたいです。でよろしいですか？
だとしたら, 「h1見出しに背景を指定したい」のではなく「メインコンテンツに背景を指定したい」のではありませんか?
まだ勉強不足なので、そこまで詳しく説明できませんでした。ただ、そこを踏まえて初心者設定したのですが。。。とりあえず他の方が説明不足の中、ヒントをくださったので解決しました。ありがとうございました。
理解を深めるためにimg要素とbackgrounc-imageプロパティの役割の違いについて調べてみましょう
そうですね。勉強になりました。ありがとうございます！
回答2件
0
ベストアンサー
基本的にJPEG画像は、背景が「透過」しませんので、背景を透過させたい画像はPNGかGIFで作成されると良いと思います。
-追記-
質問文をキチンと理解していなくてスミマセン。背景画像の上にイメージ画像の表示との事で良いでしょうか？
一部でも重なると「画像透過」の問題とCSSのポジション調整も絡みます。
「こうしたい！」等のイメージ画像もあると、皆さんから、より良い回答を得れると思います。
投稿2017/11/23 02:49
編集2017/11/23 04:10
総合スコア3523
画像の重なりを無くしたいのであれば、title画像（CSS含め）とmain画像（CSS含め）を違うブロック（div）にして、マージン等での調整で良いのでは？
関連のCSSやHTMLをキチンと提示された方が皆さんから良い回答を得れると思います。
main.jpgとtitle.jpgを別々の<div>にわけてマージンで調整したらできました。
けど、そうなるとバックグラウンドポジションの使い道はどうすればいいのか。。
とにかく、ベストアンサーにさせていただきました。
説明不足の中ありがとうございました。
バックグラウンドはその名のとおり「背景」にあたる部分ですので、通常はコンテンツを前面で考えて、背景に画像やグラデーションカラーを入れるときに使えば良いと思います。
コンテンツの位置表示で使用する場合は、どこまでをブロック（div）でまとめるかで、色んな表現が可能となりますので、色々とチャレンジしてみてください。
ありがとうございます。大変、勉強になりました！
0
訂正：
yoshinaviさんのコメントを拝見し同一の要素に置かずに別の要素に置く方が自然に感じたので以下の回答は取り消したいと思います。失礼しました！
素人のコメントなのであてにならないと思いますが・・・
title.jpg/main.jpgの垂直方向の位置が重ならないようにレイアウトしたいということならば、ポイントは
(1) cssのbackground-positionの構文が間違っている
(2) cssの背景画像は要素の大きさのレイアウトには影響しない
main.jpgの高さがいくら大きくても、#title要素の高さには影響せず、この高さはhtmlに書かれたimg要素のheightで決まる
あたりではないかと思いました。対処は例えば以下のようにしてはいかがでしょうか。
(1) title.jpgのbottomの位置がmain.jpgのtopとなるようbackground-position: center 145px;などと指定。
(2) title.jpgとmain.jpgの高さが合計500pxとすると、cssのh1#titleの中でheight: 500px;のように明示的に指定。
実験してみた限りではそれらしく表示されました。
ところで垂直方向のレイアウトに必要な情報がhtmlとcssに分離して記述することはよくないのではと感じました。例えばimgタグのwidth/heightはcss側に記述するのではいけないのでしょうか。本件の場合、画像をhtml側に書くかcss側に書くかといったことも含め、本当はどうするのがよいかといったあたり他の方のご意見を伺いたい気がしました。
投稿2017/11/23 03:05
編集2017/11/24 00:55
総合スコア18394
説明不足の中でも回答くださってありがとうございました。
height: 500px;の所が閃きの一部になりました。
よろしければまたお願いします。
フォローいただき恐縮です。
下手な回答はみなさんを混乱させかねないので本来は控えるべきですが「いや、こうした方が適切でしょう」というコメントがいただけそうなとき命知らずのコメントをする場合もありまして・・・。いずれにせよ失礼しました。
コーディングは必ずしも1つとは限りません。状況によりいくつも方法はありますので、色んな回答で良いと思いますし、質問者さんが「これだ！」と思うのも千差万別だと思います。
これからもご提案よろしくお願いいたします。
あなたの回答
tips
プレビュー
