実現したいこと
ウェブデザインのコーディングをしているのですが
添付画像のようなパソコン版でのデザインで、
ウインドウに対してヨコ幅1000pxでコンテンツをインナーとして
センター配置しています。
その上で“ウインドウの幅がどのサイズになっても”
●ピンクの背景画像が、コンテンツの右端を起点となるように
●ウインドウ左端まで画像が伸び縮みするように
●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい
このようにするには
どうコーディングするのがよいでしょうか。
※背景画像はheight200pxで固定、
backgroundで指定、background-size:coverで指定します。
object-fitで指定してもよいかと思っています。
※ソースコードにつきましては
html記述は簡素なものになるかと思うため、
css記述はご教示いただきたいため、
自分のほうからは割愛させていただきます。
よろしくお願いいたします。
試したこと
●親要素div(コンテンツ幅1000px)
max-width1000px、センター指定、position:relative;
●子要素div(背景画像)
position:absolute;
right: 0;
height:200px;
width:100%;
background背景指定、
background-size:cover;
というようなcss記述をやってみましたが
親要素が上限1000pxであるため、子要素の背景画像がそれ以上広がったりしませんでした。
●検索でそれらしいものを調べましたが、
今回の質問に該当するものがありませんでした。
![guest](/img/icon/icnUserSample.jpg)
回答4件
あなたの回答
tips
プレビュー