html - Bootstrap 4 background color looks completely different on Chrome


Keywords:html 


Question: 

When I try to set the background color to something, it looks completely fine with Firefox. But on Chrome, it's doing something weird.

I set the body background color to blue and it looks the way I'd expect it to look when using Firefox. But Chrome seems to make the body color light-blue instead of blue and has a purple box around the sample jumbotron I created. At first I thought the container had some sort of weird background property that made it look that way but after setting the container's background-color to red, I saw that the purple box isn't even the container. I'm not quite sure what that purple box is. What is going on here?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, initial-scale = 1" />
    <link rel="stylesheet" type="text/css" href="">
    <title>Bootstrap</title>
</head>
<body style="background-color: #0000FF">

        <div class="container" style="background-color: red;">
            <div class="jumbotron"><h1>Jumbotron</h1></div>
        </div>

    </body>
</html>

The first image is Chrome and the 2nd one is Firefox

Chrome

Firefox


1 Answer: 

This backgronud was made with CSS, it is likely just a difference in the way the different rendering engines handle it (one for firefox, one for chrome). If you want it pixel perfect in every browser, use an image. I think it is worth the slight variation between browsers to do it in CSS.