background-image

Hi, I started working on the frontend and I need clarification.
I want to make a page with an image as the background on which to display a div at the top and immediately below the header with the logo and menu
I started with the background-image property, but I can’t get the image to display. On inspection I get the error back that it can’t load it.
If I use the same path in the element instead it displays it for me.
The image is located in “media/site/bg.png”
The media folder is at the same level as the project
When I use the img element in the PyCharm console I see this line
[04/May/2024 12:55:26] “GET /static/media/Site/bg.png HTTP/1.1” 404 1810

I post the code for clarity

Translated with DeepL.com (free version)
HTML

    <body>
        {% block prova %}
            <div class=“image-container”>
                <img src=“../../media/Sito/bg.png” alt=“”>
                <p class=“bianco”>Testo dopo l'immagine di sfondo</p>

            </div>

            <footer>
                <p>© 2024 La Tua Azienda. Tutti i diritti riservati.</p>
            </footer>
        {% endblock %}
    </body>

CSS

.image-container {
  width: 100vw;
  height: 100vh;
  background-image: url(“../../media/Site/bg.png”);
}
.white {
		color: red;
}

solved the path is this
background-image: url(“…/…/…/media/Sito/bg.png”);

You really should not be using .. in your file reference paths. If your MEDIA_URL is /media/, the the references should be url("/media/...").
In a proper deployment environment, your webserver should reject all urls containing ..

Thanks for the tip. I wasted so much time without imagining that it was so simple. The base folder then is the project folder
From now on I will do it like this

I take advantage of this, in the css with this command
img { max-width: 100%; height: auto; }
the image is responsive. How do I make it responsive in the css ?
I tried this way but it doesn’t work

  background-image: url(“/media/Site/Team.jpg”);
  background-size: cover;
  background-position: center;

This is the incorrect conclusion to draw from this.

Do not confuse your project’s directory structure with the URLs being used to access things in your project.

In a URL, something like the /media/ prefix is going to be defined as a location to your webserver. It will be defined to map to a path that should be defined in your project as MEDIA_ROOT.

Now, it’s common that in your development environment, MEDIA_ROOT may be inside your project. But it doesn’t need to be there, and shouldn’t be in that directory in a production deployment.

So looking at the url /media/Site/Team.jpg it’s more accurate to break it down like this:

/media/  Site/Team.jpg
         ^^^^^^^^^^^^^ Relative to MEDIA_ROOT
^^^^^^^ MEDIA_URL

MEDIA_URL does not need to have any association to the name of any directory. You could define MEDIA_URL as /blah/ and not have any directory named blah.

Sorry I didn’t understand everything you said.
I’ll give you the diagram

GymGes
   PalestraGes
   Shovels
   Users
   Average

Shouldn’t the Media folder be in that location?

In the settings I have defined the media folder in the ROOT

BASE_DIR = Path(__file__).resolve().parent.parent

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

This the css

background-image: url(“/media/Site/Team.jpg”);

Is this ok ?

Side note: The lines of three backticks (```) must be lines by themselves, and not part of any other line. You also want to use that when you have any preformatted text, like your directory listings above. (I fixed this for you on this post.)

In a production-quality deployment? Absolutely not. Neither should your STATIC_ROOT. Neither of those directories belong with your code in production.
(It’s ok for testing and development, but not production.)

Absolutely. This is a URL and not a file system path, and has very little to do with where the files are stored.

Again thanks for the advice[quote=“KenWhitesell, post:8, topic:30813, full:true”]
Side note: The lines of three backticks (```) must be lines by themselves, and not part of any other line. You also want to use that when you have any preformatted text, like your directory listings above. (I fixed this for you on this post.)
Thank you next time I will do so

In a production-quality deployment? Absolutely not. Neither should your STATIC_ROOT. Neither of those directories belong with your code in production.
(It’s ok for testing and development, but not production.)
Then I didn’t understand anything I read, I need to read something to figure out how to do it

background-image: url(“/media/Site/Team.jpg”);

Is this ok ?
[/quote]

Absolutely. This is a URL and not a file system path, and has very little to do with where the files are stored.
[/quote]
Well