URLs inside CSS

Anvil Q&A
1

Hey!

I’m trying to build a simple landing page the traditional way, using JS, HTML and CSS. I have a folder with assets, including images. I want to use one of those images as a background image for one of my CSS selectors.

When running the app locally the image loads fine but it won’t work when running it from anvil, for some reason.

Code Sample:

/* Hero Section */
.hero {
    padding: 12rem 2rem 8rem;
    background-color: var(--background-color);
    background-image: url('_/theme/assets/images/candles.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    overflow: hidden;
    filter: blur(0px);
    transition: filter 0.3s ease;
}

Hopefully someone can help?

Thanks,
m

2

Hello, can I get some help here?

3

I suspect you haven’t gotten any suggestions because there’s not enough context for us to be able to understand. You say you’re writing a landing page the traditional way, i.e. without Anvil, but then you’re trying to run it inside Anvil?

If you have a clone link to demonstrate the app that isn’t working, post it to give people something concrete to play with.

4

Hey J, thanks for your answer.

I’m sorry maybe I didn’t formulate the question in the proper way. To put it in different words: I’m wondering why does the image in the URL shown In my CSS excerpt doesn’t show up when I run the app on anvil but It does work when I run it locally. Hope this helps.

5

So you’re running your own Anvil server, locally?

6

No, I meant running the page locally on my computer works fine. It’s just JavaScript , HTML and CSS.

I uploaded these files To an anvil app, I then attached the main form to my own HTML file. Everything works Except for that URL image not loading.

I was wondering, maybe there’s some kind of restrictions on anvil about integrating images from a CSS file.

7

What do you mean by running and by works?

How do you run it?

How do you know that it works?

8

When I run it locally I do:

python3 -m http.server 3000

Then the landing page loads along with the image referenced in my CSS.

When I run it on Anvil the page loads correctly, except for the image.

Here is the link to the app:

9

I have never seen the HTML structured the way you did:

      <a href="/" class="logo-link">
                <picture>
                    <source srcset="_/theme/assets/assets/images/cmd-logo-w.png" media="(prefers-color-scheme: dark)">
                    <img src="_/theme/assets/images/cmd-logo-w.png" alt="Crypto Market Data API Logo" class="logo">
                </picture>
      </a>

But if you just remove the picture and source tags and move the img tag up as a direct child of the anchor tag, then the logo loads swimmingly:

<a href="/" class="logo-link">
   <img src="_/theme/assets/images/cmd-logo-w.png" alt="Crypto Market Data API Logo" class="logo">
</a>
10

Thanks. Yeah those are unnecessary tags indeed, but the image you’re dealing with is the logo, not the picture I pointed at above.

This image (candles.jpg) is not referenced in the HTML file.

11

you can use a relative path here

/* Hero Section */
.hero {
    padding: 12rem 2rem 8rem;
    background-color: var(--background-color);
    background-image: url('../assets/images/candles.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    position: relative;
    overflow: hidden;
    filter: blur(0px);
    transition: filter 0.3s ease;
}

I would recommend moving css like this into the theme.css file
Anvil loads this with the html
that way css in theme.css doesn’t need to be fetched after the page has loaded
and you will avoid the flash of unstyled content (FOUC)

If you move everything from theme/style.css into theme.css your original version will work as expected, and you will avoid the FOUC.

3 Likes
12

Thanks!!

The FOUC was definitely solved by placing my styling inside theme.css. However image still won’t load using the relative path. Poking around, the only thing that worked was moving the image at the root _theme/ and referencing like this: url('./candles.jpg').