Quill Quill - 1 year ago 65
CSS Question

Bright semi transparent about spotify?

Recently I rebuild the Spotify home page using pure Javascript and scss to test my front-end study, Here is the link.It's not finished yet.
You can see the the difference between mine and the real one is the big-background, the markup is

<div class="bg-main">
<sceiotn class="can-see-the-background-image-1"></section>
<sceiotn class="can-see-the-background-image-2"></section>

I gave the section rgba(rgb,0.7) background,You can see the effect is not that bright as the real one,which can see the back albums clearly.I dig into their source code,But I didn't find the trick.

Answer Source


First, remove the background property on your element <div class="bg-main">.

.bg-main {
    width: 100%;
    height: auto;
    background-attachment: fixed;
    background: url(../img/bg-albums.png) repeat, 
                linear-gradient(50deg, rgba(255, 65, 105, 1) 0, 
                rgba(124, 38, 248, 1) 100%) repeat
    position: relative;

Then, in your element <header class="header"> make its background property this:

.header {
    height: 760px;
    width: 100%;
    text-align: center;

The reason Spotify's is clear to see is because the background colour gradient is on the same element as the image. So the image is superimposed on top of the background gradient.

On your site you have the image underneath, and then you place a faded background over the top - making it more difficult to see. With the image on top of the gradient background, it makes the album art much clearer and easier to see.

final result