Adding backgroud

Flow
1

How to add background image in vaadin?

And

How to add background music?

Please help me.

2

How to add background image in vaadin?

I guess you just want a background image on some specific element or for the whole page? It depends on where exactly do you want to have the background image and what other components/elements you have on the page.

Basically you just need to have an image and add some CSS (e.g. html { background-image: url("myimage.jpg") }) to the page. The URL path to the image that you need to specify in your CSS depends on which directory you have the image file in.

How to add background music?

For this you need to use JavaScript. There are probably many different ways to do it. You could use e.g. the [HTMLAudioElement]
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) or [Web Audio API]
(https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) but you probably also want to take a look at which audio formats are natively supported by different browsers https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats

Your questions don’t seem to be directly related to Vaadin or Vaadin components in any way so you may want to just google for resources about learning CSS, JavaScript or Web Audio API (not specific to Vaadin). You should first know or learn how to do the above in a simple HTML file/page but if you have problems including CSS or JavaScript in a Vaadin project (or for a specific Vaadin component), then please tell a bit more about your project and what is the CSS or JavaScript that you can’t get working with Vaadin and then we can help you better.

Are you building a Java app using Vaadin (Flow)? If so, which version of Vaadin are you using? If you’re using Vaadin 14 are you using compatibility mode (Bower) or not (npm)? Or maybe you aren’t using Java but use some Vaadin web components in another type of project?

3

If you have a Vaadin 10+ project, do you use HTML templates (PolymerTemplate) or not? You can add CSS and JS in an HTML template directly or you can also apply some CSS and execute JavaScript via the Vaadin Java API if you have a Java project.

Depending on which version of Vaadin you are using (assuming it’s a Vaadin Java project) you might have luck with some extensions available in Vaadin Directory for making it easier to play audio. See e.g. https://vaadin.com/directory/search?keyword=audio

If you’re not sure where to put the image and audio files in a Vaadin project, take a look here: https://stackoverflow.com/a/57553974/1362634

4

These parts of Vaadin documentation might be helpful:

But make sure to look at the docs for the version of Vaadin you’re using (if it’s older than V14). You can choose the documentation version from a dropdown on the left of the Docs pages. If you’re just starting with a new project, I recommend to use Vaadin 14 which was just recently released.