Transparent background for WKWebView

In my app I wish to make the WKWebView with transparent background, so the view behind (an ImageView) can show through as background picture.

webView!.opaque = false
webView!.backgroundColor = UIColor.clearColor()

The code above works fine with UIWebView, but if webView is WKWebView, a white background will be shown.

Also tried putting transparent background color in CSS. The result is the same, only works in UIWebView but not WKWebView. Any suggestion?

In my case I need to change background-color to transparent in Styles and delete an App from phone/simulator manualny - it looks that WKWebView Cache HTML / Styles

[![enter image description here][2]][2]


Uncheck `Opaque` checkbox in Interface Builder

**Update July 2021, Xcode 13**

Looks like the checkbox is still there

[![enter image description here][1]][1]

[1]:

[2]:

**WKWebView for macOS with Objective-C**

This is the magic line for transparent WKWebView views within macOS.

[webView setValue:[NSNumber numberWithBool: YES] forKey:@"drawsTransparentBackground"];

I don't know if it can help, but i used this solution below:

func setBackgroundWhite(subviews: [UIView]) {
for subview in subviews {
subview.backgroundColor = .white
setBackgroundWhite(subviews: subview.subviews)
}
}

This does recursive call inner in subviews, setting up the background to white, or another color.

I used this code when loading PDF files, `WKWebView` and iOS 10+

using objective c.
wkWebView.backgroundColor = [UIColor clearColor];
wkWebView.scrollView.backgroundColor = [UIColor clearColor];
wkWebView.opaque = false;

It will remove the white background colour in wkwebView.

If you're loading a PDF and want a background color different than the standard gray, it seems that it is necessary to wait until the document is loaded, then clear the backgrounds of the subviews. The advantage of using a `WKWebView` over a `PDFView` (iOS 11+) is that `WKWebView`s have double-tap to zoom and a page count indicator built in, and are compatible with older versions of iOS.

It should be noted that it's not a great practice to dig into system views like this as Apple can change the implementation at any time, potentially breaking the solution.

Here is how I implemented a PDF preview controller with a black background in Swift 4:

class SomeViewController: UIViewController {

var observer: NSKeyValueObservation?
var url: URL

init(url: URL) {
self.url = url
super.init(nibName: nil, bundle: nil)
}

func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.black
let webView = WKWebView()
webView.translatesAutoResizingMaskIntoConstraints = false
self.view.addSubview(webView)
NSLayoutConstraint.activate([
webView.topAnchor.constraint(equalTo: self.view.topAnchor),
webView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
webView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
webView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
])

self.observer = webView.observe(\.isLoading, changeHandler: { (webView, change) in
webView.clearBackgrounds()
})

webView.loadFileURL(self.url, allowingReadAccessTo: self.url)

}
}

extension UIView {
func clearBackgrounds() {
self.backgroundColor = UIColor.clear
for subview in self.subviews {
subview.clearBackgrounds()
}
}
}

This code might help you. Updated for Swift 3+

self.webView = WKWebView()
self.webView.isOpaque = false
self.webView.backgroundColor = UIColor.clear
self.webView.scrollView.backgroundColor = UIColor.clear

For iOS 10+ using Swift:

self.webView = WKWebView()
self.webView!.isOpaque = false
self.webView!.backgroundColor = UIColor.clear
self.webView!.scrollView.backgroundColor = UIColor.clear

I know this is a very old question. But I've been struggling with this today. I don't know if it's just me, but webView.backgroundColor was undefined in WKWebView, and webView.opaque was read-only. The only way for me to fix this was to set the web views layer background color to the CGColor clear

webview.wantsLayer = true
webView.layer?.backgroundColor = NSColor.clearColor().CGColor
and the containing NSView the same way

webViewParent.layer?.backgroundColor = NSColor.clearColor().CGColor

That's the only thing that worked for me, I hope it could help someone else as well.