センター配置のコンテンツを起点に画像の配置について

実現したいこと

ウェブデザインのコーディングをしているのですが

添付画像のようなパソコン版でのデザインで、
ウインドウに対してヨコ幅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であるため、子要素の背景画像がそれ以上広がったりしませんでした。

●検索でそれらしいものを調べましたが、
今回の質問に該当するものがありませんでした。

maisumakun

2024/07/25 06:03

・試してみたことや、その結果はありませんか？・ウィンドウ幅が1000pxを割った場合は、どのようにしたいのでしょうか？

cc-taishi

2024/07/25 06:24

追記いたしました。＞●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい＞●親要素div（コンテンツ幅1000px） max-width1000px、センター指定、position:relative; ●子要素div（背景画像） position:relative; right: 0; height:200px; width:100%; background背景指定

yambejp

2024/07/25 06:24 編集

コンテンツの左側のピンクは何でしょう？ 1000px超の幅の画像があるのでしょうか？

cc-taishi

2024/07/25 06:36 編集

1000pxセンターコンテンツの右端を起点として背景画像をウインドウ左端いっぱいまで表示させたい、ということになります。

cc-taishi

2024/07/25 06:31 編集

背景画像はbackground-size:coverか、 object-fit:coverで指定する想定となります。

行動規範の内容に同意します

回答4件

こうですか？

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/c0dhzsy2/

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <style>
9    .outer {
10      display: grid;
11      grid: auto-flow / 1fr 1000px 1fr;
12
13      @media (width<1000px) {
14        grid: auto-flow / 0 95% 5%;
15      }
16    }
17
18    .content {
19      grid-row: 1 / 1;
20      grid-column: 2 / 3;
21    }
22
23    img {
24      grid-row: 1 / 1;
25      grid-column: 1 / 3;
26      z-index: -1;
27      justify-self: stretch;
28      height: 200px;
29      object-fit: cover;
30    }
31  </style>
32</head>
33
34<body>
35  <div class="outer">
36    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
37      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
38      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
39      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
40      est laborum.</div>
41    <img src="http://placehold.jp/150x150.png?text=" alt="">
42  </div>
43</body>
44
45</html>

投稿2024/07/25 07:53

編集2024/07/25 09:05

Lhankor_Mhy

総合スコア36601

cc-taishi

2024/07/26 02:30

ありがとうございます！サンプルありがとうございます！理想の挙動です。 gridをあまり使ったことがなかったので勉強しようと思います。

行動規範の内容に同意します

イメージ的にはこんな感じで二重構造にすればよいのでは？

html
1<style>
2:root{
3  --center-width:1000px;
4}
5.content{
6position:relative;
7  height:500px;
8  max-width:calc(50% + var(--center-width) /2 );
9 background-image:url(https://placehold.jp/ff8080/000000/1200x200.png?text=1200x200_1200x200_1200x200_1200x200_1200x200);
10}
11.center{
12display:flex;
13justify-content:center;
14align-items:center;
15position:absolute;
16width:var(--center-width);
17height:300px;
18background-Color:yellow;;
19right:0;
20}
21</style>
22<div class="container">
23<div class="content">
24<div class="center">test</div>
25</div>
26</div>
27

投稿2024/07/25 07:32

編集2024/07/25 07:35

yambejp

総合スコア115870

cc-taishi

2024/07/26 02:28

ありがとうございます！理想の挙動です！本筋とは関係ないですが、 background-imageにこういう風にテキストを乗せることができるんですね。勉強になりました！

行動規範の内容に同意します

ベストアンサー

こんな感じでどうでしょう。

html
1<div class="content">
2  <p>Lorem ipsum dolor sit amet. Et nihil internos ut illo ullam et totam omnis vel assumenda asperiores hic vero totam. Sit omnis quia et fuga voluptates sed quis facere eum deserunt iure vel cumque quis rem quasi assumenda. Aut deserunt voluptatum aut itaque consequatur qui inventore enim et enim quasi est laudantium quia sit quidem consequatur. Aut accusamus ipsam et magnam quas est voluptate magnam non atque dolore id repellendus tempore et commodi sapiente ab iusto sunt? </p>
3  <p>Et consequatur quia qui ducimus quidem et exercitationem consectetur a animi velit et tempora quaerat a dolorum maiores. Rem fuga consequuntur sed nisi ratione sed dolorum sint ea unde eius qui laborum dolor aut aperiam iste sit itaque suscipit. Et cumque velit et similique officiis aut nulla neque ut omnis nemo quo totam voluptatem. Et reiciendis explicabo nam quia fugiat aut dolorem nisi. </p>
4  <p>Qui rerum officiis est itaque autem id iure asperiores. Et illum consectetur ut molestiae dolore nam fuga vitae. Ad dolor saepe sed voluptatem enim At nihil impedit eos deleniti culpa sed quae distinctio id cumque enim. </p>
5  <div class="bgimage"></div>
6</div>

css
1.content {
2  position: relative;
3  max-width: 1000px;
4  margin: auto;
5  @media (width < 1000px) {
6    padding: 0 5%;
7  } 
8}
9.bgimage {
10  position: absolute;
11  top: 30px;
12  width: calc(500px + 50vw);
13  right: 0;
14  @media (width < 1000px) {
15    width: calc(100vw - 5%);
16    right: 5%;
17  } 
18  background: url(https://placehold.jp/2000x200.png) center/cover;
19  height: 200px;
20  z-index: -1;
21}