Dw CS6でウィンドウサイズと画像の位置について

Question

色々ググってみましたが解決出来なかったので質問させてください。

Dw CS6でサイト作成しています。
CSSで画像の位置を決めていますが、ブラウザのウィンドウサイズを狭めても画像は固定された位置になっています。
背景のようにウィンドウサイズに合わせて画像の位置が変わる（ウィンドウサイズを狭めても、画像が左上にくるようにしたい）ようにするには、
CSSでどうのように記述すればよいでしょうか？
添付画像の左側がいつものウィンドウサイズで右側がウィンドウサイズを狭めたものです。
この画像の位置はHPのサイトロゴがきます。メニューやヘッダー、コンテンツ、フッターも
あります。まずサイトロゴの位置設定が出来れば他の部分にも応用出来るかと思います。
以下ソースです。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストページ</title>
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1 class="header"><img src="images/sora.jpg" width="150" height="150" alt="空" /></h1>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */
body{
background-image: url(./images/back_ground_img_top2.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.header{
position: absolute;
top: 10px;
left: 300px;
}

よろしくお願いします。

naokita · Accepted Answer

ロゴ

h1{ padding: 10px 0 0 10px;} h2 img{ margin: 10px 0 0 10px;} h3{ position: relative; height:150px;} h3 img{ position: absolute; top: 10px; left: 10px;} h4{ background:url(images/sora.jpg) no-repeat 10px 10px; height:150px; text-indent:-9999px;} 貴方の表示方法は、 bodyの表示領域の　左から300pxの位置に固定しているのだから、ブラウザを狭くしても左から300pxの位置になる。逆にブラウザを広げ（1500pxとか）ると、同じ様に意図しない背景の外側に表示されてしまう・・・構造段階で、幅を指定したdiv枠を設定し、その中にコンテンツや画像を配置するだけです。上記例の他にも枠内で配置する方法は多々あります。他のテキストとか画像の干渉の問題が出てきますので・・・色々やってみて、失敗を繰り返しましょう。

Dw CS6でウィンドウサイズと画像の位置について

<body>

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

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

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