Ask Ubuntu is a question and answer site for Ubuntu users and developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Consider the following QML snippet:

Page {
    WebView {
        id: webView
        anchors.fill: parent

I then attempt to load some HTML in the WebView using the following JavaScript:


However, the WebView has a white background:

enter image description here

(Ignore the fact that the text is too small.)

Is there a way to make the background transparent?

share|improve this question
up vote 5 down vote accepted

You could try QtWebKit.experimental. If you add import QtWebKit.experimental 1.0 to your QML files, your WebView objects will have access to experimental attributes:

import QtQuick 2.0
import QtWebKit.experimental 1.0
import Ubuntu.Components 0.1

MainView {
    id: main

    Page {
        id: mypage
        Rectangle {
            color: "green"
            anchors.fill: mypage
            WebView {
                id: webView
                anchors.fill: parent
                experimental.transparentBackground: true

        Component.onCompleted: webView.loadHtml("<p>Hello</p>");

Obviously you'll get this kind of warning:

WARNING: The experimental API will change from version to version, or even be removed. You have been warned!

share|improve this answer
Thanks. Are there any implications of using an older version of QtWebKit? (The latest version is 3.0.) – Nathan Osman Mar 18 '14 at 6:42
You can use both at the same time, import QtWebKit.experimental 1.0 AND import QtWebKit 3.0 – Sylvain Pineau Mar 18 '14 at 8:08

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.