I have a web page containing am entry form. HTTPS is enabled via an Apache redirect for all requests matching that page. Unfortunately, because the CSS pulls in external images using 'background-image: url(/images/...)', the browser will generate a warning message that the page contains mixed content.
What's the best way to resolve this issue?
What will happen if we use CSS to set both a background image and a background color for the same element? The background image will show with a border around it in the background color. The background image and the background color will be blended and both will show.
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
It's perfectly possible to use both a color and an image as background for an element. You set the background-color and background-image styles.
The background-image property in CSS is used to set an image as the background of an element. Using this CSS property, we can set one or more than one background image for an element. By default, the image is positioned at the top-left corner of an element and repeated both horizontally as well as vertically.
Update 2014.12.17:
Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you > need is available on SSL, then always use the
https://
asset.Allowing the snippet to request over HTTP opens the door for attacks like the recent Github Man-on-the-side attack. It’s always safe to request HTTPS assets even if your site is on HTTP, however the reverse is not true.
More guidance and details in Eric Mills’ guide to CDNs & HTTPS.
Source: Paul Irish – The Protocol-relative URL
Here is a very popular solution:
There's this little trick you can get away with that'll save you some headaches:
<img src="//domain.com/img/logo.png">
div{background: url(//path/to/image.png);}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With