I’m trying to replicate trainline‘s website as a web developer course’s daily project and I wanted to imitate it as similar to the original as I can.
So, I was trying to set up the background-image (currently assigning it as <body>‘s background-image in CSS) after I downloaded it directly from the website’s HTML code; the image’s link can be found searching for eu-23.1x.jpg in the page’s HTML.
However, once I found the background image link, here, I saw that the sky’s color is much brighter than what’s displayed on the website. They somehow added a filter to the image darkening the sky, and that enabled them to put white text (the headings in the hero section) without any accessibility issues.
I then searched for any CSS filter the added to the image to try and replicate the sky darkening effect but I found none. The image has no filter, no hue, no saturation, no overlayed div with a background-color or anything.
How did they darken the sky without any CSS or overlays? Am I missing some CSS classes or overlayed tags?
>Solution :
look at the class with the <div class="_1oxc7jv4" data-test="home-banner-container-eu"><div> selector.
it has a ::before attribute with background: linear-gradient(to bottom,rgba(21,82,126,.7),rgba(21,82,126,0));, which is responsible for the darkened background.
notice this is a gradient that is on top of the image and comes from the header (the element mentioned above).