WEBページ作成初心者なので、既に自分で調べてはみたものの分からない事があるため質問させていただきます。
XHTML1.0で外部CSSファイルを使って背景画像を表示しようと思っています。この時画像サイズを固定で表示したいのですが、ブラウザのサイズを変更するとそれに合わせて背景画像のサイズも変更されてしまいます。
以下、XHTMLと外部CSSのコードと動作環境です。
・CSSファイル(css/test.css)
lang
1div#bgimg_foundation{ 2 text-align:center; 3 //background-position:top center; 4} 5 6div#bgimg{ 7 background-image:url("../Resource/img/main.png"); 8 background-position:top center; 9 background-repeat:repeat-y; 10 background-attachment:scroll; 11} 12 13div#text{ 14 position:static; 15 top:0px; 16 left:110px; 17}
・XHTMLファイル
lang
1<?xml version="1.0" encoding="utf-8"?> 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="content-style-type" content="text/css" /> 7 <meta http-equiv="content-script-type" content="text/javascript" /> 8 <meta name="description" content="test" /> 9 <meta name="keywords" content="test" /> 10 <title>test</title> 11 <link type="text/css" rel="stylesheet" href="css/test.css" /> 12 <script type="text/javascript" language="javascript"></script> 13 </head> 14 <body style="background-color:gray;"> 15 <div id="bgimg_foundation"> 16 <div id="bgimg"> 17 <div id="text" style="color:red;">テストテキスト</div> 18 <br /> 19 <br /> 20 <br /> 21 <br /> 22 <br /> 23 <br /> 24 <br /> 25 <br /> 26 <br /> 27 <br /> 28 <br /> 29 <br /> 30 </div> 31 </div> 32 </body> 33</html>
・動作環境
OS:Windows 8.1
ブラウザ:Internet Explore 11
ブラウザのサイズが変更されても背景画像のサイズを固定で表示する方法はないでしょうか?
分かる方がいましたら教えてください。よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/04 03:24