Set a background image width & height, with aspect ratio

Question

I search the solution on this forum and on internet, most solution available but nothing work for my case... Or I don't understand maybe.

I have a background image, and I would like this take 100% of width and same value for the height.

.top-section {
  background: url('../img-content/Bg1.png') no-repeat center center fixed;
  background-size: cover;
}

<div class="top-section"></div>

Aymen · Accepted Answer · 2019-05-22T10:34:24.897

2

html, body {   height: 100%; }

.top-section {    
  width: 100%;   
  height: 100%;   
  background-image: url("'../img-content/Bg1.png");   
  background-attachment: fixed;   background-size: cover; 
}

For other Image use similar

.top-section2 {
  width: 100%;   
  height: 100%;   
  background-image: url("");
  background-size: cover;
}

edited May 22 '19 at 10:34

answered Sep 18 '17 at 19:23

Aymen

1,476
18
28

Don't take 100% of my height I post you a screenshot if you want – KolaCaine Sep 18 '17 at 19:27
@Jonathan send me – Aymen Sep 18 '17 at 19:27
Please, look this link : https://image.noelshack.com/fichiers/2017/38/1/1505762885-capture-d-ecran-2017-09-18-a-21-24-18.png – KolaCaine Sep 18 '17 at 19:28
Update, use this – Aymen Sep 18 '17 at 19:34
Same result, I try this solution before... I can't resolve my problem I don't understand why – KolaCaine Sep 18 '17 at 19:36

Set a background image width & height, with aspect ratio

1 Answers1