Basic Flexbox excercise from total beginner

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hello Trezmor,

  to create a white border around the avatar, you can simply add outline: 3px solid #fff; to the class of the image. You could also use border with the same values instead, but the advantage of the outline property is that it doesn't take up space. Feel free to try both techniques to see the difference.

  Regarding the background images, a better approach would be to specify them in CSS:

  body {
    background:
      url("../images/bg-pattern-top.svg") top -300px left -50px/contain no-repeat,
      url("../images/bg-pattern-bottom.svg") bottom -350px right -50px/contain no-repeat;
    background-color: hsl(185deg, 75%, 39%);
    margin: 0; /* Remove the white space around body */
  }
  

  To make the effect visible, you need to remove both div elements containing the background images, and also remove the background-color declaration from the container class.

  I hope it is clear enough. Keep it up!

  Marked as helpful

  0
• 

  T0R0•280

  @XxtbmfxXPosted about 2 years ago

  Border: You could put the image in a div (by url) and then put something like
  border: 5px solid white; because the image doesn't allow a round color border Background: you could put it out of the main container and use z-index property to change it somehow That's what i thought tell me if it helps you somehow :D

  Marked as helpful

  0

  ---

  

  Daniel Dekany•920

  @dknydPosted about 2 years ago

  Hi Mate,

  Thanks for the tip, the inclusion of the image in a div with white background and border solved the issue of the white circle around the profile pic! :)

  1