Mobile-first solution using BEM, Flexbox, and SCSS

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi Victor,

  Good solution - well done!

  • you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this would help get you closer to the purple colour overlay in the design rather than creating an overlay in the mark up
  • also explore background-blend-mode

  All the best!!

  Marked as helpful

  2
• 

  MarcoLepDev•50

  @marcolepdevPosted about 3 years ago

  To color the right image in violet, apart from using both the background-color and the background-image, use the blend-mode. I tried different ones and multiply seemed to do the work quite well.

  Marked as helpful

  1
• 

  Vicktor•900

  @Victor-NyagudiPosted about 3 years ago

  Thank you guys for all the helpful feedback!

  I ended up using a background-color, a background-image, and background-blend-mode to get the result I wanted.

  I've updated my GitHub repo, but I don't see the changes over here, so I guess I'll have to restart the challenge.

  Cheers!

  0

  ---

  

  Vicktor•900

  @Victor-NyagudiPosted about 3 years ago

  @Victor-Nyagudi I've updated my solution to the latest version that's built using SCSS.

  0
• 

  Jason Moody•300

  @MoodyJWPosted about 3 years ago

  Hey there! I was having a similar issue on this challenge and never quite figured it out until I was working on something else more recently.

  .container {
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
  }
  

  Above code sets the background color (obvi use your own values here), the 4th rbga value is the opacity.

  .container::before {
    content: "";
    background-image: url(your/file/here);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.1;
  }
  

  Above code uses the pseudo-element ::before, which allows you to place the image with an opacity. Other props are for centering and covering the containing element with the image (change as needed).

  .container > * {
    position: relative;
  }
  

  Above will apply a relative position to everything below the container, without this other elements would also have the color filter.

  I tried working with a linear-gradient and/or blend-mode, but had little success (I was probably just doing it wrong) and this worked well for me on my other project.

  0