Using CSS Flex box and Media Querries

Community feedback

• 

  Michael Mendoza•15

  @makoydevPosted over 3 years ago

  Hi Brian, you can do object-fit: fill; on the image part. it will automatically resize the image for you and avoid any stretch. Hope this helps.

  1

  ---

  

  Brian Carlo Birondo•320

  @Briancarlo24Posted over 3 years ago

  @makoydev Thanks for the reply. That's new to me.

  Also, I was wondering if there is a way to blend image to the color-overlay. I used opacity around 60% for the overlay.

  I appreciate your reply.

  1

  

  Michael Mendoza•15

  @makoydevPosted over 3 years ago

  @Briancarlo24 Hi again Brian, if you're using img then you can use object-fit:fill. But if you're using the image as background image you can do it this way.

  width: 100%;
  height: 100%;
  background-image: url(../images/image-header-desktop.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: $--clr-violet;
  background-blend-mode: multiply;
  

  make sure the parent container of your image is set as 50% width. This will help you to resize the image to 100% of 50% of its parent container. On the overlay part, I have used background-blend-mode. Just set the background color to $--clr-violet: hsl(277, 64%, 61%); (Btw, I'm using Sass that's why it's like that) on top of the background image you've set then add the background-blend-mode property in order to blend both of them. There are plethora of choices in blending but background-blend-mode: multiply; fits best for the project.

  If you have any question just email me to [email protected] i'll try to help.

  0

  

  Brian Carlo Birondo•320

  @Briancarlo24Posted over 3 years ago

  @makoydev Thanks, I just did that actually and it looks better now.

  I appreciate all the help.

  1