#How to put a background image on a div ?

1 messages · Page 1 of 1 (latest)

silver olive
# 
div {
  background-image: "url({post.image})", //post.image is a String URL to an image
  //my content
}
#

Try that

#

that's unrelated to that code

#

share me the remaining code

# 
render! (
    rsx! {
        div {
            class: "bg-black w-full min-h-screen",
            div {
                class: "text-white p-4 grid grid-cols-3",
                for post in posts.iter() {
                    rsx!(
                      div {
                        class: "rounded-md bg-slate-950 p-4 m-4 text-center",
                        background-image: "url({post.image})",
                        Link {
                            to: "/posts/{post.slug}",
                            h1 {
                                class: "font-bold text-2xl",
                                post.title.to_string()
                            }
                            Link {
                                to: "/@{post.author.username}",
                                p {
                                    "@{post.author.username}"
                                }
                            }
                            p {
                                "Créé le {get_human_date(post.created_at.with_timezone(&Local))}"
                            }
                            if post.created_at != post.updated_at {
                                rsx! {
                                    p {
                                        "Modifié le {get_human_date(post.updated_at.with_timezone(&Local))}"
                                    }
                                }
                            }
                            p {post.description.to_string()}
                        }
                    }
                    )
                }
            }
        }
    }
)
#

You need to wrap the elements inside the for-loop inside a rsx!() call

#

ahhhhh

#

it's the -

#

try with background_image

#

instead of background-image

#

Nice

pulsar cave
#

I'm struggling with the same, can't put an img in the background

#

what's the right way if we have the URL in a literal form?

# 
    body {
        div {
            background-image {r#"url(https://mowo.my.canva.site//1d33017d95d35f68048824bce69d3552.png)"#}
        }
        "Hello, world!"
        }
    }
gloomy mesa