質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

656閲覧

ホームページ作成をしてます。htmlとcssを使って背景画像を付けたいのですがどうしたらいいのでしょうか。

oresi.

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/01/06 13:11

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2022/01/07 02:15

質問を途中で送信してしまっているか、または、入力内容が反映されていないようです。 編集して、適切な内容に変更してください。
guest

回答2

0

以下のように書きますと、HTMLとCSSを使って背景画像を付けられるかと存じます。

ポイント

CSSで、以下のように設定すればよいです。

  • background-image: url("背景にしたい画像のパス");
  • 背景画像の上に、何か文字なり何なりを被せたいのであれば、以下のように書きます

 ・背面の要素にposition:relative;
・前面の要素にposition:absolute;
・前面の要素にtop:~~; left:~~;(背面の要素を基準に、どこに前面の要素を設置するかを指定)

サンプルコード

↓コピペで動きます。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title>Sample</title> 5</head> 6<body> 7 8<div id="image"> 9 <p>あいうえお。これはサンプルです。</p> 10</div> 11 12</body> 13</html> 14 15<style> 16/*CSSを記述*/ 17div{ 18 width:300px; 19 height:300px; 20 position:relative; 21} 22div p{ 23 position:absolute; 24 top:50%; 25 left: 50%; 26} 27div#image{ 28 background-image:url("img1.jpg"); 29     /*ここのファイル名は変更してください。*/ 30     /*ちなみにこの書き方だと、このHTMLファイルと同階層の画像を読み込んでいることになります*/ 31} 32</style>

 
…っていう感じでよろしかったでしょうか( ^^)
お役に立てましたら幸いです。
よろしくお願いいたします。

投稿2022/01/06 13:55

CaTi_Sphene

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oresi.

2022/01/07 15:05

ご丁寧にありがとうございます。 上記の通りに打ちましたが画像が表示されないです。警告、エラーは出ていないんですが、何が原因でしょうか、、
guest

0

質問するより検索する方が簡単に探してる答えにたどり着けると思いますが
全く調べてもいないんでしょうか?

webサイトを作成しているんですよね?
↓これでわかりますか?

html

1<div class="bg">1)この要素に背景を指定する</div>

css

1.bg{ 2background:url(表示したい画像のパス);

もしくは

html

1<div style="background:url(表示したい画像のパス)">2)この要素に背景を指定する</div>

サンプル
https://codepen.io/recal/pen/YzrvmdJ

投稿2022/01/06 13:48

編集2022/01/06 13:55
recal

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oresi.

2022/01/07 15:05

ご丁寧にありがとうございます。
recal

2022/01/08 13:03 編集

一度解決済みになったと思うのですが 取り消されてますね、なにかありましたか? 解決できなかった場合は、何をしてその後どうなったかという情報を添えて 質問を編集していただければ誰かしら対応してくれると思いますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問