Azuracast: How i can change the background img of public html ?

[m333w]

Hi all

I woud like to change de backgroup of the public html.

In "Custom branding" ->"Custom CSS for Public Pages" i have add :
background-image: url("https://url.of.the.img/");

But nothing have change, someone can help me ?

Best regards.

[djmuratb]

/var/azuracast/www/web/static/img/hexbg.png & hexbg_dark.png

[m333w]

Thx for reply @djmuratb, so i just have to replace hexbg.png with my img with the same name ? You sure is a good practice ?

[djmuratb]

Yes it changes. But when the update is done, the current image will come back.

[m333w]

Ok thx 👍

[SlvrEagle23]

@m333w Just to clarify, you can indeed use the "Custom CSS for Public Pages" section to customize the background image, you just need to specify it with the full CSS selector, like so:

.four-zero, .login-content, .public-page-content {
    background: #edecec url('https://picsum.photos/1920/1080?image=39&blur') center center;
}

This will allow you to replace the image without needing to make any material changes to the AzuraCast codebase itself.

[m333w]

Hi @SlvrEagle23,

Thx very mutch for this beter solution (no neeed to change something after updating). Its look perfect, just one thing, is it possible to make the border of the player fading ?

http://imgbox.com/MEzdeLCo

Best regards.

[ErnestPH]

@m333w Just to clarify, you can indeed use the "Custom CSS for Public Pages" section to customize the background image, you just need to specify it with the full CSS selector, like so:

.four-zero, .login-content, .public-page-content {
    background: #edecec url('https://picsum.photos/1920/1080?image=39&blur') center center;
}

This will allow you to replace the image without needing to make any material changes to the AzuraCast codebase itself.

After the latest update, the CSS method is not working anymore

Thanks!

[SlvrEagle23]

@m333w @ErnestPH @djmuratb Just as an update, as a result of the design update where we rolled out a newer version of our underlying UI framework, the CSS selector for the background image on the public pages has changed.

You should now be able to use:

body.page-minimal {
    background: #edecec url('https://picsum.photos/1920/1080?image=39&blur') center center;
}

...to set the page's background. Of course, feel free to replace the URL and hex color in the CSS above as needed.

[ErnestPH]

Yes of course, I forgot about that. haha What was I thinking? :) Thanks again!

[m333w]

@SlvrEagle23 Thank you very mutch :)

[isAAAc]

there is my CSS to change the background, responsive by design ;)
you can see the result on https://stream.krashboyz.org/public/krashboyz_bordel_klub

Enjoy

body.page-minimal {
    background: #edecec url('https://pic.krashboyz.org/lutim/g8MWeW3X/0U5W3Nte.jpg') center center;
    background-repeat: no-repeat;
    background-color: black;
    background-size: contain;
}

[janosnet]

there is my CSS to change the background, responsive by design ;)
you can see the result on https://stream.krashboyz.org/public/krashboyz_bordel_klub

Enjoy

body.page-minimal {
    background: #edecec url('https://pic.krashboyz.org/lutim/g8MWeW3X/0U5W3Nte.jpg') center center;
    background-repeat: no-repeat;
    background-color: black;
    background-size: contain;
}

thanks dear