imgの上に文字を重ねたい

Question

色々と調べて、一番使われてる方法というのを試したのですが、文章の下にmarginが出来るだけで画像の上に表示されません。
ご教授お願い致します。

https://techacademy.jp/magazine/26562

背景画像を敷いてから文字を載せる処理です。

この手法が最も使用されています。
と書かれてる下のタグを入力したつもりです。
ご助言お願い致します。

<img class="main" src="images/top.jpg" alt="top画">
<h1 class="rinen">*****************************</h1>

.rinen{
	font-size: 25px;
	text-align: center;
	background-image: 
	url("*****************.com/image/top.jpg")
	background-size:1200px 400px;
	width:1200px;
	height: 400px;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Comments

[m.ts10806]

>色々と調べて、一番使われてる方法
キーワードと調べた記事を提示してください。
「一番」をどのように統計とったのか気になります。
それに、背景にしたいのか配置した画像の上に載せたいのか分からないコードになってます。
あと、reset.cssはひとまず抜きにした方が良いのでは？

[let]

ご返信ありがとうございます。
参考にしたURLを記載しました。お手数ですがご確認お願い致します。

[let]

背景にしたいと考えています

[m.ts10806]

では、imgタグは何のためにおいてますか？

[let]

imgを背景にしたいのですが、考え方間違えていますか？

[m.ts10806]

cssの基本を学習してください。
背景画像にするならimgタグは不要です。

[let]

imgを消して画像を配置すればよいのですか？

[m.ts10806]

CSSとHTMLの基本を学習してください。
（ここはあくまで起きてる問題に対して回答する場所なので、入門的なところは別途ご自身で調べてやってもらったほうが良いと考えます）

[let]

わかりました。
もう一度調べてみます。ありがとうございました

[m.ts10806]

これに限らず、プログラムは書いたとおりにしか動かないということは覚えておいてください。「書いた通り」は「プログラムの仕様通り」なので、結局仕様＝基本をおさえない限りは思う通りに組むことはできません。
コピペ切り貼りでは動かないということです。

Answer 1

プロパティ末尾が閉じられてません。

    background-image: 
    url("*****************.com/image/top.jpg")  ←

構文チェックを通すと明白です。

プログラミングする際のエディタも構文チェック機能があるものを利用してください。質問する前、もっと言えば、ブラウザで確認する前に見つけられます。

Comments

[let]

閉じるのを見落としていました。ありがとうございます。
今閉じて再度動作確認してみたんですが、変化はありませんでした。まだ問題があるんでしょうか？
この方法が間違いなんでしょうか？

[m.ts10806]

こちらでは出てるので、何とも。
画像のパスが間違ってる／そこに存在しない
のいずれかではないでしょうか。

[let]

知識不足は仰る通りです。imgの上に文字を配置したい場合、backgroundプロパティとHTML上にimgでどちらも文字を上に重ねるのですから、【背景】かと聞かれたら知識不足の私は背景だといわざるおえません。あれから調べて自分で解決できましたが、初心者には厳しいものいいかと存じます。いい勉強になりました。

Answer 2

<div class="example"> <img src="◯◯.jpg" /> <p>SUNSET</p> </div>

.example {/親div/
position: relative;/相対配置/
}

.example p {
position: absolute;/絶対配置/
color: white;/文字は白に/
top: 0;
left: 0;
}

.example img {
width: 100%;
}
こちらを参考にしてimgの上に文字を重ねる事ができました。