Vanilla HTML and CSS; Flexbox; Media query;

Community feedback

• 

  Yudi Yoshida•350

  @yudiyoshidaPosted over 3 years ago

  You can also apply an overlay this way:

  HTML:
  <div class="container-with-background-img">
     <div class="overlay"></div>
     ...
  </div>
  
  CSS:
  .container-with-background-img {
     background-image: url("...");
     position: relative;
  }
   
  .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: black;
     opacity: 0.6;
  }
  

  0

  ---

  

  Yudi Yoshida•350

  @yudiyoshidaPosted over 3 years ago

  And if you want to add more content inside parent div, you need to make them relative as well.

  0

  

  Fabio Figueiredo Rodrigues•60

  @fabiofigrodPosted over 3 years ago

  @yudiyoshida Thank you for your tip!

  1
• 

  Gonza Zabaleta•155

  @gonzabaletaPosted over 3 years ago

  Just wanted to say that your code is so clean. I learned a lot with it :)

  0

  ---

  

  Fabio Figueiredo Rodrigues•60

  @fabiofigrodPosted over 3 years ago

  @gonzabaleta Thank you so much! Glad it helped!!

  0
• 

  Matheus Rodrigues•290

  @matheus-rodrigues00Posted over 3 years ago

  Hi Fabio! I mean... it works well :) Another way to achieve a similar effect would be to set the image in background-image, add the violet in background-color and use the background-blend-mode property. Not saying that this would be better but it's good to be aware of options!

  Hope this helps :)

  0

  ---

  

  Fabio Figueiredo Rodrigues•60

  @fabiofigrodPosted over 3 years ago

  @Rafok777 Thanks! It is a very nice option and I didn't knew about it! Looks like more professional and have a lot more options than putting some pseudo element to play around with the opacity!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  🌟🌟🌟🌟🌟 Looks good

  maybe this will help you with the overly color https://highrise.digital/blog/css-blend-modes/

  0

  ---

  

  Fabio Figueiredo Rodrigues•60

  @fabiofigrodPosted over 3 years ago

  @palgramming Thank you for sharing this article! It helped a lot and looks like a much more professional solution!

  1

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @fabiofigrod No problem glad it helped

  0