アプリ版：「スタンプのみでお礼する」機能のリリースについて

背景画像のHTMLを教えてください

解決済

  • 質問者：godhappy
  • 質問日時：
  • 回答数：2件

よろしくお願いします
背景画像の関係のHTMLを教えてください。

複数の背景画像を挿入して、さらに背景画像が自由に移動できて、さらに背景画像を繰り返したくないです。背景画像は幅1500ピクセル×500ピクセルぐらいのを複数、設置したいです。

教えて欲しいことは
１、背景画像の移動のHTML
２、複数の背景画像の表示位置のHTML
３、背景画像の挿入のHTML
４、背景画像の繰り返したくないHTML
です。

複数の背景画像を挿入して、それを自由に移動できて、さらに背景画像を繰り返したくないです。

下記は現在ホームページビルダーで作成しているHTMLです。参考にしてください



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows">
<title></title>
</head>


<body background="file:///C:/Users/信吾は天才/Desktop/image1.png"></body>



</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

背景画像は文書の内容ではありませんのでHTMLには書きません。


【以下理由】
background　は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
background = uri [CT]
　★推奨しない。
　この属性の値は、画像資源を指し示すURIである。この画像は一般に、視覚系ブラウザで背景に敷き詰められる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
『推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
・・・・
background属性は、XHTML1.1以降、XHTML2.0(中止)、HTML5では廃止されています。

＞下記は現在ホームページビルダーで作成しているHTMLです。
　困ったな「国内のウェブサイトにおける非互換要因の一つとして、ホームページ・ビルダーの名前が調査書の中で挙がっている( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )」とあるように・・。
　ウェブページを作成する時にHTML/CSSの知識は必須です。特にビルダーのようなWebオーサリングツールを使用するときは、テキストエディタで作成する人以上に、それらの知識が必要です。そうしないと上記のような問題が発生する。
　決して、HTML/CSSの知識がなくても製作できるということはありません。逆です。

サンプル
・Another HTML Lint Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証済みのHTML4.01strict + CSS2.1+ 一部CSS3・・・ウェブ標準です。
　<doctype>宣言は下記のように記述するとブラウザ間の誤差はほぼなくなります。

・タブは＿に置換してあるので戻す。
★HTMLには文書構造しか書かれていないためにデザインは自由に変更できます。
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　は、15年前の1999年のHTML4.01の勧告以来重要なポイントです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html{/* HTMLの背景 */
background-image:url(./image1.png);
background-repeat:no-repeat;
background-size:cover;/* CSS3 背景で全体を覆う */
}
body{
background:url(./image2.png) no-repeat 50px 100px;/* まとめてもOK */
}
div.header h1{/* h1の背景 */
background:url(./image3.png) no-repeat;
overflow:hidden;
text-indent:-10em;
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます
感謝します

通報する
お礼日時：2015/04/11 07:16

No.1

  • 回答者： Ogre7077
  • 回答日時：

一つの案として



<style>
div.bg {
position:absolute; z-index:-1; /* 背景画像 */
width:1500px; height:500px;
}
div.bg#no1 {
left:100px; top:200px; /* 自由に移動 */
background: no-repeat url("信吾は天才/image1.png"); /* 繰り返したくない */
}
div.bg#no2 {
...
</style>

<p>この本文の後ろに画像が表示される
...
<div class=bg id=no1></div> <!-- 複数の背景画像を挿入 -->
<div class=bg id=no2></div>
...
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます
感謝します

通報する
お礼日時：2015/04/11 07:16

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報