Background picture not loading

Phoenix Forum Questions / Help
,
1

Hi all,

This must be a very simple issue but I cannot seem to find what the problem is. I have a scss file where I define a background for my homepage as:

.section.bg_landing {
    background: url('https://images.unsplash.com/photo-1531746790731-6c087fecd65a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1595&q=80') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-color: #B8D8D8 !important;
    background-blend-mode: overlay !important;
}

My problem is that the background image is not being loaded at all. I have other test images from unsplash (and also the same one as in the header for testing) in the document body and they are loaded.

Is there any sort of restriction for scss in Phoenix ? (I do not know, I am just trying to come up with an explanation).

When I test the code statically (outside Phoenix) it works just fine.

Any idea what I may be doing wrong?

Thanks!

2

Shouldn’t that be background-image

3

Did You setup webpack for scss support?

How do You import this scss file?

4

LOL. I just realized I had replied in Spanish. So, sorry, sometimes your brain just works in automatic. What I was saying is that it is not necessarily so. It is well explained in this link.

Thanks!

5

I did setip up to support scss. In /assets/webpack.config.js I set it up as:

      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
6

So, I found out a solution. I had placed all my code in /assets/css/my_file.scss. Apparently that is wrong, I had to name it _custom.scss instead of my_file.css. I am guessing you can name it anyway you want with the proper configuration but the _custom name works OK to me. Now everything is working. Thanks all for replying!