Qt stylesheet, background image from filepath

Question

All examples I have found so far refer to background images in the resource file. Something like:

 QFrame {
     background-image: url(:/images/header.png);
 }

I wonder, is there a way to use a file directly from the file system? Something like:

     background-image: url("C:\temp\foo.jpg"); ????
     background-image: file("C:\temp\foo.jpg"); ????

I have tried all kind of urls, but none is working. Do I always have to add the file in the resources?

Solution

You don't necessarily need add your files as resources. Try this for example:

QFrame{background-image: url("C:/temp/foo.jpg");}

Note the standard slashes, like you'd use in a URL—they're not Windows' back-slashes. So this, for example, will not work:

QFrame{background-image: url("C:\\temp\\foo.jpg");} /* Won't work! */

Windows' back-slashes are invalid in QSS, even when you escape them.

You could also use a relative path:

QFrame{background-image: url("temp/foo.jpg");}

Be careful, though, because the path is relative to the CWD at runtime, which the user might change.

Comments

[Retired Ninja]

If you use backslashes you need to escape them, like C:\\temp\\foo.jpg. It's generally easier to use forward slashes.

[Jablonski]

@RetiredNinja Please note: in qss G:/2/qt.jpg works, but "G:\\2\\qt.jpg" doesn't work. You are absolutely right about escaping, but in qss need to use G:/2/qt.jpg

[Michael Scheper]

Relative to what, though?

[Jablonski]

@MichaelScheper en.wikipedia.org/wiki/…

[Michael Scheper]

I didn't ask what a relative path is; I asked what the path is relative to. In other words, what is the assumed parent of temp, in your example? The CWD? Some base Qt path that I'm not aware of?

[Jablonski]

@MichaelScheper It is standard relative path which means that it is relative to cd or current directory or currrent working directory as you wrote. If you build&run app from Creator, cd - is build directory which is not same dir where executable file located

[Michael Scheper]

Great. Thanks. I've edited your answer to include this information.