Built using flexbox, and media queries.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Ray-Xavier-2021! My name is Vanza!

  I would recommend to use background-blend-mode for purple overlay, which is much easier in my opinion for this kinda stuff:

  1. HTML

  <div class="img-container">
   </div>
  

  2. CSS

  .img-container {
     background-image: url(../images/image-header-mobile.jpg);
     width: 100%;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-color: hsl(277, 64%, 61%);
     background-blend-mode: multiply;
  }
  

  This way, you don't need child element on your img-container.

  That's it! Hopefully this is helpful!

  0
• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  Good job👍 site is responding well. In addition to what @Paisley said, you can also use the css filter property on image. Or, you can create an overlay on top of the image with proper color and opacity.

  0

  ---

  

  Ray-Xavier-2021•80

  @Ray-Xavier-2021Posted over 3 years ago

  @FarisPalayi not to sure on how to apply the method you're advising

  1

  

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  @Ray-Xavier-2021

  • If you want to use filter, then I suggest you to learn about filters since working with them can be a bit tricky. Here's an article from css-tricks
  • The second method - Create a div or span with the same height and width of the image. And position it absolutely by using position: absolute and set it to relative to parent(image container div) by adding it a position: relative. And then you can give height and width 100% to get the same height and width of the image container. Then give the new created element a background-color (for eg: purple) and give it some opacity like this opacity: .8. Instead of using a div or span you can also use css pseudo-elements like ::before or ::after if you are familiar with them. And play with the background-color until you find a good match.

  And if you are just starting out, I suggest you to move on with this project and, once you learnt about these stuff, you can change it then.

  0
• 

  P

  Paisley•55

  @simpsonpaisleyPosted over 3 years ago

  Looking great! You can make the purple overlay on the image using the mix-blend-mode property, and adding a container with a purple background colour around the image element.

  0

  ---

  

  Ray-Xavier-2021•80

  @Ray-Xavier-2021Posted over 3 years ago

  @simpsonpaisley thank will try thaty out never learned that .....greatly appreciated

  0

  

  Ray-Xavier-2021•80

  @Ray-Xavier-2021Posted over 3 years ago

  @simpsonpaisley i tried your method but it broke the image for the desktop layout

  1

  

  P

  Paisley•55

  @simpsonpaisleyPosted over 3 years ago

  @Ray-Xavier-2021 Hi, sorry about that. Did you make the div display property block? If not, that might help.

  0