Responsive page with Pure HTML and CSS

Community feedback

• 

  President Tree•360

  @PresidentTreePosted about 3 years ago

  No worries! I had a hard time with the background position, too, but I have figured out a solution from looking at others. However, before I explain it, I would like to point out that the background images should be under the body tag rather than the main tag and you can have multiple background pictures on a single tag. You can also use one tag to position a background like you did for the first one instead of separating x and y as you did for the second one. I would remove anything concern the background images from main and put this under body:

  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-position: right 50vw bottom 40vh, left 50vw top 40vh;
  background-repeat: no-repeat;
  

  or, to condense it even more, use:

  background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, url("./images/bg-pattern-bottom.svg") left 50vw top 40vh no-repeat;
  

  Marked as helpful

  1

  ---

  

  Ivelin Mitev•140

  @ivelinsmPosted about 3 years ago

  Thank you very much for your feedback! I will listen to you and place the background under the body tag from now on.

  As of the positioning, I was actually looking for a method to stick them to the card, so that it can look the same on every screen, but I don't know how. I guess I can just use the @media rule for most of the standard resolutions and adjust it. @PresidentTree

  0

  

  President Tree•360

  @PresidentTreePosted about 3 years ago

  @ivelinsm, if you want to stick it under the main tag, you should be able to use the same thing I gave you except you may need to use different numbers for placement. I have not tested it, but you can try.

  Marked as helpful

  1