Adding image as a container background

0
Hi, how do you actually add an image as a container background? I know that a style similar to: background-image: url("Picture1.png") is used, but where in my Mendix file should I store my image (entitled "Picture1.png") for it to work?
asked
1 answers
1

You can set it in your scss but you have to either have the file hosted somewhere or added in your mendix project images directory.  C:\Users\xxxx\Documents\Mendix\xxxxx\theme\styles\css\images

If you do this then you need to create a class in your scss. This is mine for example:

.photo-bg{
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center right;
        background-size: cover;
        align-content: center;
        background-image: url("../images/blur-bg@3x.jpg");
        background-image: 
            -webkit-image-set (url("../images/blur-bg.jpg") 1x,
            url("../images/blur-bg@2x.jpg") 2x ,
            url("../images/blur-bg@3x.jpg") 3x );
        background-color: #064468;
            .shs, h1{
                color: #fff;
            }
    }

 

If it's from a hosted service you could add it into your scss as such:

.yourImage {
background: url("https://insertimagelocation.png") no-repeat;
                background-size: contain; 
                height: 20px;
                width: 20px;
}

 

answered