I have a simple question that I haven't been able to find an answer for despite my efforts on Google and Wikipedia. Perhaps I'm not wording it correctly.
My query is regarding how the combination of CSS and HTML is displayed on-screen and in a browser without losing resolution at different pixel densities like raster images do.
I understand that CSS styles the HTML, which is then read by a browser, but I'm curious about the specific process responsible for rendering 'lossless' graphics.
Take this code snippet as an example: http://jsfiddle.net/C3DW7/4/
div {
width:200px;
height:200px;
margin: 0 auto;
margin-top:50px;
background: url(http://s21.postimg.org/6vvqhdbyv/square.jpg) no-repeat;
}
When you zoom in on this square, the edges remain sharp while the inner purple square, being a bitmapped image, gets blurred. Why does the HTML element maintain its sharpness even when dimensions are set in pixels?
I apologize if this question seems basic, but I can't seem to find a clear answer anywhere.