HTML & CSS

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello, @AslamtoIbrahim!

  Instead of using the background image with the linear gradient, you can just uncomment the img tag in your html.

  After this add an empty div inside the sec2 div and give it a class name overlay or anything you like then add the following CSS:

  .overlay  {
      background: hsl(277, 64%, 61%);
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      mix-blend-mode: multiply;
  }
  

  • After adding the overlay, add position: relative to the .sec2 div.
  • This will make an overlay and add that purple touch to the image.

  Since we uncommented the image and now are using the image one for desktop and one for mobile we can make use of the picture element to make it switch at max-width:768px like this:

  <picture>
  <source srcset="images/image-header-mobile.jpg" media="(max-width: 768px)" >
  <img src="images/image-header-desktop.jpg" alt="" >
  </picture>
  

  • Here inside the <picture> element we use source to set the image we want to change at a specific screen size.
  • srcset attribute is used to set the URL path whereas media is used as a media query so as to when the image should change (in your case I'm using max-width since you have used desktop first workflow)
  • the img tag is usually used to set up the initial image and work as a normal img tag.
  • So after using this initially your image will be the desktop one but as soon the width hits 780px the image will switch from desktop to mobile (the media query we specify in source according to that)

  You can also remove all the CSS from the .sec2 div which are background related and now won't be needed.

  Good luck!

  Marked as helpful

  0

  ---

  

  BRAHIM AJGAGAL•320

  @AslamtoIbrahimPosted over 1 year ago

  Hi, @adityaphasu Thank you so much for your valuable and helpful comment

  1