With the transition to Windows 10 and the introduction of the Microsoft Edge browser, the popularity of Internet Explorer began to falter. Mozilla Firefox and Google's Chrome are much more advanced browsers and keep pace with the introduction of new elements in the CSS field.
For this reason, based on personal experience, I found it difficult to use i multiple backgrounds or multiple backgrounds. In practice, it is possible to attribute multiple background images to each element, obtaining an image consisting of multiple backgrounds. The background image property will present image paths separated by a comma. All the other properties concerning the background: background-size, background attachment, background-repeat, can be used by separating them by the comma sign and always with the same logic: the first image represented, the one on the left, refers to the first image floor.
How to apply two images in the background of a website with CSS
What I did to apply two images in the background of my site was to intervene in the CSS by inserting the following lines of code in the body:
body{color: #333;
background: url(images/bk_body.png), url(“adv/skin-amazon.jpg”);
background-repeat: repeat-x,no-repeat;
background-position: top center !important;
background-attachment: local, fixed !important;
}
Testing this implementation on my CSS multiple background code on Firefox, Chrome and Edge, the result was great, but the biggest problem was with Internet Explorer, which apparently doesn't support multiple backgrounds. By setting the background-attachment to fixed on one of the two images, Internet Explorer also applies it to the other image, which instead is set to Local, in this it generated the illegibility of the articles
Now, since Microsoft's browser is still used a lot by owners of Windows XP, Vista, Windows 7 and Windows 8.1 I thought I'd find a solution.
What I did to make this work well was to remove the multiple background in the CSS for users browsing with Internet Explorer. In practice I have disabled the multiple background on all versions of Internet Explorer 6. 7, 8, 9, 10, 11 by acting only on the background-attachment:
body{color: #333;
background: url(images/bk_body.png), url(“adv/skin-amazon.jpg”);
background-repeat: repeat-x,no-repeat;
background-position: top center !important;
background-attachment: local, fixed !important;
background-attachment: local9 !important; /* apply to all ie from 8 and below */
*background-attachment: local; !important; /* apply to ie 7 and below */
_background-attachment: local; !important; /* apply to ie 6 and below */}
/ * applied for problems with IE11 and earlier versions * /
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body{background-attachment: local !important;}
}
If you want to apply it to Microsoft Edge as well, just add these lines of code in your CSS:
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
This first solution is to declare CSS rules that can only be read by Internet Explorer. For example, an asterisk (*) before the CSS property or an underscore (_) as you can see indicate the versions of Internet Explorer. The same goes for adding 9 before the semicolon, to indicate IE8 or below, and so on. Eg:
- IE8 or Below: To write CSS rules specifically to IE8 or below, add a backslash and 9 (9) to the end before the semicolon.
- IE7 or below: Add an asterisk (*) before the CSS property.
- IE6: Add an underscore (_) before the property.
.box {
Background: gray; / * standard * /
Background: pink 9; / * IE 8 and later * /
* Background: green; / * IE 7 and later * /
_background: blu; / * IE 6 * /
Remember that if you want to act instead in the HTML file inside the HEAD you have other solutions.
IE conditional comment is probably the most used to fix IE bugs for specific versions (IE6, IE7, IE8). Here are some code examples to allocate styles to different versions of Internet Explorer:
= IE8
= IE8 or below
= greater than or equal to IE8
/* css for IE 8 */
Another solution is to add a CSS class that references the IE version. To specify the IE version, use the IE class as the parent selector and so on:
I hope this solution can be useful and help you.
To learn more about the special characters applied in CSS and that identify IE versions, you can take a look at:
How to create an IE-Only Stylesheet
Happy Coding!
