cssで画面いっぱいに背景画像を表示させたい

実現したいこと

cssで背景画像を画面いっぱいに表示したい

前提

htmlとcssでサイト制作をしています

<section>内にbackground-imageで背景画像を表示させましたが、全てのセクションにmargin: 0 autoがきいているため画像がmargin分表示されません

画面幅いっぱいに背景画像を表示させたいのですが
works_contentのwidthを100％に指定しても、1240pxの指定があるため、そこまでしかのびません。
背景画像は、それから左右にはみ出させて画面いっぱいにしたいです

発生している問題・エラーメッセージ

<section class="all_section top_works">
  <h3>works</h3>
  <div class="works_content">
    <div class="works_content-img">
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
    </div>
  </div>
</section>


### css

.all_section{
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.top_works{
    height: 600px;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}


```ここに言語名を入力
ソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

all_sectionはほかのセクションでもすべてに使用していて、前任の方の書いたコードなのでできれば触らない方向で進みたいです

Lhankor_Mhy

2024/03/25 07:10 編集

『背景画像を画面いっぱいに』とのことですが、一方で height: 600px とあるようです。そこで、補足願います。 1. 画面高さが600pxを超えている場合、背景画像は画面高さに合わせて要素からはみだすのですか？　また、スクロールしたときには追従しますか？ 2. 画面高さが600pxより小さい場合、背景画像は画面高さに合わせて要素より小さくするのですか？　また、スクロールしたときには追従しますか？

hatena19

2024/03/25 08:13

「画面いっぱい」というのは画面幅のことでしょうか。高さは600pxで指定してあるので、600px固定。幅は width: 90%; max-width: 1240px; と指定してあるが、背景画像は、それから左右にはみ出させて画面いっぱいにしたいということでしょうか。

sususuzu

2024/03/25 12:24

Lhankor_Mhy様 1. 画面高さが600pxを超えている場合、背景画像は切れてしまいます。スクロールしたときには追従しません 2. 画面高さが600pxより小さい場合の確認方法がなく、不明です。 hatena19様「画面いっぱい」というのは画面幅のことです。 works_contentのwidthを100％に指定しても、1240pxの指定があるため、そこまでしかのびません。背景画像は、それから左右にはみ出させて画面いっぱいにしたい、という認識で合っています。 sectionから背景画像だけを出して記述するほかないでしょうか…

hatena19

2024/03/25 13:02

> 「画面いっぱい」というのは画面幅のことです。 > works_contentのwidthを100％に指定しても、1240pxの指定があるため、そこまでしかのびません。 > 背景画像は、それから左右にはみ出させて画面いっぱいにしたい、という認識で合っています。これを質問に追記してください。質問は後からでも編集できます。

Lhankor_Mhy

2024/03/26 00:04

現状をお伺いしてるのではなくて、期待している状態をお聞きしています。

sususuzu

2024/03/27 07:13

コメントの意図を理解しておらず、大変失礼いたしました。今回別の方のアンサーにより解決いたしましたので、こちら解決済みにさせていただきました。コメントしていただき、ありがとうございました。

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

回答2件

ベストアンサー

.top_worksの親要素を1個設け、それにwidth: 100%;を指定しておけば良いのでは？

投稿2024/03/25 22:36

Refrain

総合スコア682

sususuzu

2024/03/26 13:39

回答ありがとうございます。親要素を設けてみると、解決しました！ベストアンサーに選ばせていただきました。本当にありがとうございます。

Refrain

2024/03/26 13:44

滅茶苦茶雑な文章になってすみませんでした… 寝起きだったもので…

sususuzu

2024/03/28 06:35

とんでもないです。とても助かりました。ありがとうございました！

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

質問へのコメントより

「画面いっぱい」というのは画面幅のことです。
works_contentのwidthを100％に指定しても、1240pxの指定があるため、そこまでしかのびません。
背景画像は、それから左右にはみ出させて画面いっぱいにしたい、という認識で合っています。

要素のbackground-imageは要素からはみ出させることはできないので、疑似要素にbackground-imageを設定する方法になると思います。

CSS
1body {
2  position: relative;
3}
4.all_section {
5  width: 90%;
6  max-width: 1240px;
7  margin: 0 auto;
8}
9.top_works {
10  height: 600px;
11}
12.top_works::before {
13  content: "";
14  display: block;
15  position: absolute;
16  left: 0;
17  width: 100%;
18  height: 600px;
19  background-image: url(https://picsum.photos/1200/800);
20  background-repeat: no-repeat;
21  background-size: cover;
22  z-index: -1;
23}