Profile Card Component

Community feedback

• 

  Paulo Xavier•100

  @paulo-xavierPosted about 1 year ago

  Hi! I spent many hours in this background too. My strategy to solve this was adding the two images in a <img> tag and then I positioned them using the "position: relative" and the basic properties for top and left.

  HTML
  <img class="bg-top" src="./src/images/bg-pattern-top.svg" alt="Bubble background">
  <img class="bg-bottom" src="./src/images/bg-pattern-top.svg" alt="Bubble background">
  
  CSS
  .bg-top {
      position: relative;
      max-width: 800px;
      height: auto;
      left: -490px;
      top: 311px;
    }
  
  .bg-bottom {
      position: relative;
      max-width: 800px;
      height: auto;
      top: -177px;
      right: -418px;
    }
  
  

  Probably not the best solution as possible, but it worked for me! 😀

  Marked as helpful

  0

  ---

  

  denise•230

  @moncadadPosted about 1 year ago

  @paulo-xavier thanks for the feedback i'll add this to my list for future refrence! :)

  0
• 

  Jennifer Souza•340

  @zoedarkweatherPosted about 1 year ago

  The background was kind of tricky. It's two images, set both to no-repeat. There's one that is offset from top left and one that is offset from bottom right. You can take the dimensions of the images to compute the offsets. The MDN docs on background https://developer.mozilla.org/en-US/docs/Web/CSS/background I find helpful. Also here is a link to my solution if you want to look at my css for the bg. https://github.com/zoedarkweather/profile-card-component. Hope this helps. :-)

  Marked as helpful

  0

  ---

  

  denise•230

  @moncadadPosted about 1 year ago

  @zoedarkweather Thanks for the advise I will be checking out the resource link and your solution! :)

  0