@adityaphasu
Posted
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 usesource
to set the image we want to change at a specific screen size. srcse
t attribute is used to set the URL path whereasmedia
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 normalimg
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
@AslamtoIbrahim
Posted
Hi, @adityaphasu Thank you so much for your valuable and helpful comment