1

as a div background I want to load an image, in the css file for the backgroud-image property I give the path to the image, which is correct, but the image does not load, but when somewhere, any place in html file, I use that code line

<img src="/static/images/map.png" class="map_photo" alt="map_photo">

then the background image for my div pops up and additionall, there is a picture loaded by this line of code above, it seems to me that this image is not pre-loaded, or something like that, so maybe i should add in my css file some code to allow load images to html

I'm useing the newest Intellij Ultimate, and I included all the necessary attachments below.

div into which I want to load the graphic is class map

  <section id="map_section">
    <div id="map"></div> <-- This DIV
    <div id="events"></div>
  </section>

My CSS code block

#map_section
{
    height: 600px;
    width: 600px;
}
#map {
    height: 600px;
    width: 600px;
    background-image: url(./images/map.png);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

And the image with project structure is added as a attachment project structure

Thx for Help!

Fast edit to make it clear when my html code look like this:

  <img src="/static/images/map.png" class="map_photo" alt="map_photo">
  <section id="map_section">
    <div id="map"></div>
    <div id="events"></div>
  </section>

i have situation like this: result

when I delete or comment that one line

<!--  <img src="/static/images/map.png" class="map_photo" alt="map_photo">-->
  <section id="map_section">
    <div id="map"></div>
    <div id="events"></div>
  </section>

both images disappear: result

pkobylka
  • 19
  • 3

3 Answers3

0

try butting your path in quotation marks .

background-image: url('./images/map.png');

Nour Monir
  • 9
  • 2
  • theres no any difference That line : map_photo is a problem or fixed, when I have it in my code background-image properties working well, when i delete it, background image is not loading. – pkobylka Mar 11 '23 at 19:20
  • didn't you try to give the background-image the same src as image . – Nour Monir Mar 11 '23 at 19:23
  • if my background-image have same path as image srv `/static/images/map.png` there is no difference with `map_photo` is working well, but when i comment or delete that code line, its stopping works... maybe its intellij problem, but i dont think so. – pkobylka Mar 11 '23 at 19:34
  • Quotes are optional. See https://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage. – vio Mar 11 '23 at 19:40
  • @NourMonir i made 2 more ss, pls czechk my post again, maybe it will be easier to understand my problem – pkobylka Mar 11 '23 at 19:48
0

It is actually ../ not ./.

So the correct code would be:

background-image: url(../images/map.png);
vio
  • 167
  • 9
  • tryed it, no result, if u can pls check my post, i made edit at the end – pkobylka Mar 11 '23 at 19:47
  • @pkobylka Are you viewing this in IntelliJ's in-built preview? If so, try viewing the HTML in an actual browser. See if the code works correctly then. – vio Mar 11 '23 at 19:57
  • I figure it out! My css file was linked incorrectly... i had it like this: `` but when i changed it to this `` it started working correctly, I think i know answer, but can u ply try to explain me as simple and u can why it wasnt working well? – pkobylka Mar 11 '23 at 22:21
  • @pkobylka because the correct way is adding dot dot like ../ only putting the slash will not work. – vio Mar 13 '23 at 11:16
0

My css file was linked incorrectly... i had it like this: <link rel="stylesheet" href="/static/styles.css" type="text/css" /> but when i changed it to this <link rel="stylesheet" href="../static/styles.css" type="text/css" /> it started working correctly.

pkobylka
  • 19
  • 3