[V5] Set background-image on page

Hello I have my image in root directory:

assets/img/green_start.png

I need to load this image into background-image div

If I use it with tag img it’s work:

<img src="images/green_start.png" alt="">

But, if I use it in div not work

<div class="page-content" data-background="images/green_start.png">

Can help me ?

Use CSS
background: url()

Not function:
background: url(‘images/green_start.png’)

Not a function, but use CSS. :expressionless:

Yes not function = not work

:sweat_smile:

style="background: url('images/green_start.png')"

I receive:

green_start.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Try with this. Inside ( ) no quotes needed, and it’s background-image, not just background:

Nothing. not Work

:roll_eyes:

Then you must have the wrong URL to the image, if you’re still getting a 404 error. Check that you have the folder structure correct.

Remember if your CSS file is in a folder such as ‘CSS’ and your image is in a folder named ‘images’ then you need to navigate up to the root first, using ‘…’

Example:
If the CSS file is in a sub-folder:
background-image: url('../images/green_start.png');

If the CSS file is in the root:
background-image: url('images/green_start.png');

This is my project directory:

I need to display an image into home.f7.html (in this case)

Background-image: url(’…/assets/img/green_start.png’);

I have resolved whit this code:

background-image: url('{{ green }}')"

<script>
import green from '../assets/img/green_start.png';
  export default {
    data() {
      return {
        green
       ...
      }
    }, // end DATA
...
</script>

thanks for all. :slight_smile:

1 Like