Huddle landing page with a single introductory HTML and CSS

Community feedback

• 

  Marcus Hugo•365

  @marcus-hugoPosted about 3 years ago

  Looks really good! I had the same thing happening and what worked for me was,

  background-position: 0 0;
  background-size: auto 100vh;
  

  0
• 

  Marie Pascale Brunelle•230

  @mpbrunellePosted about 3 years ago

  Hello,

  Nice work. To solve the background problem, you could set the background-size property to cover on the body in the desktop media query:

  background-size: cover;

  0

  ---

  

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  @mpbrunelle yeah i have tried that also, but still it is shrinking on changing the screen size

  0

  

  Marie Pascale Brunelle•230

  @mpbrunellePosted about 3 years ago

  @mdajmalshadab Bear in mind that if the background image doesn't shrink, it doesn't expand either. This means that on screens larger than the image, it will not cover the background, which is not ideal.

  I think that the idea behind this design is to have an image that covers the page, not the size of the image. That's the tricky part in responsive design: the mockups don't tell us how we should manage the transitions between breakpoints. We have to figure them out by ourselves or talk to the designer to know what they had in mind (most of the time, they haven't given it much thought, by the way).

  That said, if you want the background to always keep the same size, you could write:

  background-size: 1318px 800px;

  Or, since it is an SVG, whatever size you want it to have.

  Hoping this is helpful...

  Marked as helpful

  1

  

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  @mpbrunelle Thank you!😊

  0