Hướng dẫn banner full width css - biểu ngữ toàn chiều rộng css

Tôi muốn làm cho hình ảnh biểu ngữ của mình lên chiều rộng toàn màn hình, nhưng tôi đã không thành công. Đây là mã của tôi.

* {
  min-width: 300px;
  max-width: 2000px;
  margin: 0;
  padding: 0;
}

.header-image {
  background-image: url("idb.jpg");
  margin-top: 20px;
  top: 100%;
  background-position: center;
  color: black;
  background-repeat: no-repeat;
  height: 400px;
  background-size: cover;
  width: 100%;
}

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

DBS

8,5994 Huy hiệu vàng36 Huy hiệu bạc51 Huy hiệu Đồng4 gold badges36 silver badges51 bronze badges

Hỏi ngày 31 tháng 8 lúc 12:25Aug 31 at 12:25

4

Tạo ra header và topa Div width: 100% và cũng làm cho topa div trở thành flex với

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

1

Và tôi nghĩ bạn có ý định viết

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

2 không phải

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

3.

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

4 Áp dụng phong cách cho mọi yếu tố

body {
  min-width: 300px;
  max-width: 2000px;
  margin: 0;
  padding: 0;
}

.header-image {
  background-image: url("idb.jpg");
  margin-top: 20px;
  top: 100%;
  background-position: center;
  color: black;
  background-repeat: no-repeat;
  height: 400px;
  background-size: cover;
  width: 100%;
}
header,.topa{
  width:100%;
}

.topa{
  display:flex;
  justify-content: end;
}

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

Đã trả lời ngày 31 tháng 8 lúc 12:56Aug 31 at 12:56

ATPATPATP

2.4664 Huy hiệu vàng10 Huy hiệu bạc31 Huy hiệu Đồng4 gold badges10 silver badges31 bronze badges

0

Bạn đang cố gắng đảm bảo hình ảnh chiếm toàn bộ chiều rộng, tôi có hiểu chính xác vấn đề của bạn không? Nếu có, tôi chỉ lấy một hình ảnh ngẫu nhiên trực tuyến và sử dụng HTML và CSS mà bạn và nó dường như hoạt động tốt. Hình ảnh chiếm toàn bộ chiều rộng. Có thể có gì đó sai với hình ảnh của bạn? Có lẽ bạn có thể đăng một đoạn mã có vấn đề cũng có hình ảnh?

* {
  min-width: 300px;
  max-width: 2000px;
  margin: 0;
  padding: 0;
}

.header-image {
  background-image: url("https://www.gannett-cdn.com/-mm-/05e97d16e7fb53439a4222e53dcba47d4d31dde8/c=0-97-1280-584/local/-/media/USATODAY/USATODAY/2014/06/04/1401911998000-AP-Color-Cosmos.jpg?width=3200&height=1680&fit=crop");
  margin-top: 20px;
  top: 100%;
  background-position: center;
  color: black;
  background-repeat: no-repeat;
  height: 400px;
  background-size: cover;
  width: 100%;
}

  

    Home
    Start
    Say hi
  






  

    
Hero Image.
      
Text Text Text
    
  

Đã trả lời ngày 31 tháng 8 lúc 13:01Aug 31 at 13:01

Aghashamimaghashamimaghashamim

5633 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges

1

Mã HTML trong câu hỏi vẫn giữ nguyên. Đây là mã CSS hoạt động

body{
    background: hsl(240, 50%, 5%);
    color: #fff;
    padding: 25px;
    font-family: sans-serif;
    min-width: 300px;
    max-width: 2000px;
    margin: 0;
    padding: 0;
  }

Kết quả cuối cùng

Đã trả lời ngày 31 tháng 8 lúc 13:10Aug 31 at 13:10