• Which the release of FS2020 we see an explosition of activity on the forun and of course we are very happy to see this. But having all questions about FS2020 in one forum becomes a bit messy. So therefore we would like to ask you all to use the following guidelines when posting your questions:

    • Tag FS2020 specific questions with the MSFS2020 tag.
    • Questions about making 3D assets can be posted in the 3D asset design forum. Either post them in the subforum of the modelling tool you use or in the general forum if they are general.
    • Questions about aircraft design can be posted in the Aircraft design forum
    • Questions about airport design can be posted in the FS2020 airport design forum. Once airport development tools have been updated for FS2020 you can post tool speciifc questions in the subforums of those tools as well of course.
    • Questions about terrain design can be posted in the FS2020 terrain design forum.
    • Questions about SimConnect can be posted in the SimConnect forum.

    Any other question that is not specific to an aspect of development or tool can be posted in the General chat forum.

    By following these guidelines we make sure that the forums remain easy to read for everybody and also that the right people can find your post to answer it.

CSS background-image. What are the folder names?

Q

qqwertz

Messages
42
Country
ca-novascotia
Hi,

I am trying to create an in-game panel for an addon that uses Simconnect. I can get the panel to appear in the menu, and I can also add images to the panel using an <img ..> tag. However, I when I try to create a background image using the css file, in the form
background-image: url("<dir>filname.png");
I never get the image to load, and I tried all sort of variations for the directory of the image. No path (just "filename.png") works for <img>, but not for CSS background-image. I do get a "file not found" error message from coherent in the console, but I still have to find the path that would work in CSS.

Does background-image work at all? If not, how would I get an image into the background, behind a bunch of buttons? html5 canvas?

Thanks,
Peter
 
I just tested this myself to see if there was any particular issue with using background images. I can certainly have any image as a background image.

I used this in the CSS file where the image is located relative to that CSS file.
Code: 
multifunctionutilitygauge-element #primaryDisplay {
    background-image: url('images/background.png');
}

If you place it in a style tag in the HTML file, you may need to have the full path back to the root html_ui directory which in my case would be "/Pages/VCockpit/Instruments/MultifunctionGauge/images/background.png"
 
sal1800 said:
I just tested this myself to see if there was any particular issue with using background images. I can certainly have any image as a background image.

I used this in the CSS file where the image is located relative to that CSS file.
Code: 
multifunctionutilitygauge-element #primaryDisplay {
    background-image: url('images/background.png');
}

If you place it in a style tag in the HTML file, you may need to have the full path back to the root html_ui directory which in my case would be "/Pages/VCockpit/Instruments/MultifunctionGauge/images/background.png"
Click to expand...
Thanks a lot, Sal1800. Your response helped me to figure out the problem. I wrote
url("images/background.png");
instead of
url('images/background.png');
That ".." quotation marks work fine in the image tag, but not in CSS, one must use '...' there.
Thanks again,
Peter
 
qqwertz said:
That ".." quotation marks work fine in the image tag, but not in CSS, one must use '...' there.
Click to expand...
That's an interesting observation. The CSS spec allows for single or double quotes or in fact no quotes at all. But then the Coherent renderer may not exactly follow the spec.
I always use the single quotes in JS and CSS but double quotes for HTML attributes but that's just a style thing.
 
You must log in or register to reply here.
Back
Top