Why is background image not showing

HTML & CSS
1

I have a background for an application but it is not displaying

body {
  background: url("bg.png");
  font-family:Arial, Helvetica, sans-serif;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
  margin: 0;
  padding: 16px;
}

{
    "application": {
        "single_instance_guid": "",
        "dpi_aware": true
    },
    "debugging": {
        "show_console": false,
        "subprocess_show_console": false,
        "log_level": "DEBUG4",
        "log_file": "debug.log"
    },
    "main_window": {
        "title": "Full o Sounds",
        "icon": "logo 1.ico",
        "default_size": [1200, 1200],
        "minimum_size": [640, 480],
        "maximum_size": [0, 0],
        "disable_maximize_button": false,
        "center_on_screen": true,
        "start_maximized": false,
        "start_fullscreen": false,
        "always_on_top": false,
        "minimize_to_tray": false,
        "minimize_to_tray_message": "Minimized to tray"
    },
    "popup_window": {
        "icon": "/logo 1.ico",
        "fixed_title": "Full o Sounds",
        "center_relative_to_parent": true,
        "default_size": [800, 600]
    },
    "web_server": {
        "listen_on": ["127.0.0.1", 0],
        "www_directory": "www",
        "index_files": ["index.html", "index.php"],
        "cgi_interpreter": "php/php-cgi.exe",
        "cgi_extensions": ["php"],
        "cgi_temp_dir": "",
        "404_handler": "/pretty-urls.php",
        "hide_files": []
    },
    "chrome": {
        "log_file": "debug.log",
        "log_severity": "default",
        "cache_path": "webcache",
        "external_drag": true,
        "external_navigation": true,
        "reload_page_F5": false,
        "devtools_F12": false,
        "remote_debugging_port": 0,
        "command_line_switches": {},
        "enable_downloads": true,
        "context_menu": {
            "enable_menu": true,
            "navigation": true,
            "print": false,
            "view_source": false,
            "open_in_external_browser": false,
            "devtools": false,
            "copy": true,
            "paste": true

        }
    }
}

my bg

bg
bg1200×1200 4.79 KB

my output is just a blank white screen.

2

Hi DEVDEVDEV, welcome to the forums.

The background url is pointing to the image in the same directory as the CSS file.

Is that where the image is located?

If it is, you could try the same directory path sign like:

background: url("./bg.png");

3

still not showing up

4

So the image is to be found in the same directory as the CSS file?

1 Like
5

Try using the full URL instead of a relative path related to the CSS file.

1 Like