質問: 現状態になっています。 ![はめ込むことができました。](https://teratail.storage.googleapis.com/uploads/contributed_images/50c0742fdb4bdce32d07efe8ab174e04.png) ### 前提・実現したいこと 画像をフレーム(額)で取り囲みたいです。 Macのウィンドウの幅を広げた時に画像が一致(グループ)して一緒に動く状態にしたいです。固定したいです。 ### 発生している問題・エラーメッセージ ウィンドウの幅を広げると額だけが移動せずに、 画像が移動してしまいます。 ### 該当のソースコード Coolsrightは画像、spdayoが画像の額縁、 boxはメッセージテンプレート額です。 ーーー ``` CSSソース #spdayo{ margin:0 auto; position: relative; } #coolsright { position: absolute; top: 55px; left:60px; } #box { margin-left: auto; margin-right: auto; position: relative; top: 290px; } #boxtext{ position:absolute; top:100px; left:100px; } ``` ーーーーーーーーーーーーー HTMLソース ``` Welcome to Tokyo Hill ``` プレート画像にテキストを入力したいです。 spdayo額縁に画像を入れたいです。 画像を真ん中に持っていき、固定したいです。 ### 試したこと どのように書けばいいのかご教授ください。 何卒、よろしくお願いいたします。
回答: (html) <!--額がおおもとの方がいいです。--> div id="coolsright"> (css) box{ ==== margin:0 auto; position:relative; } coolsright{ =========== position:absolute; top:50px;/*額縁上面の縦幅*/ left:50px;/*額縁左面の横幅*/ } background:url(sp1.jpg)が表示されない理由は以下のような感じだと思います。 ・最後に;がないから ・divに十分な高さ、幅がないから ・上の書き方だとcssとsp1.jpgが同じ階層内にある事が前提ですが、そうなっていない。 ・background:url(sp1.jpg) no-repeat center center; としてみる。 どうでしょうか?