The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image down-size looses sharpness Reply To: Image down-size looses sharpness


I’ve put together a small example. I hope it is sufficient to make a point. I am unfortunately not allowed to provide any of our code or images because they belong to the company I work for. I have therefore just used some random images. The logo can be somehow similar since it also consists of styled text and some additional graphics. I have additionally just tested with a couple more images using firefox. Using the image linked in the example and the “responsive design view” in firefox with size 433×644 for example will make the logo look somehow weird.

    <meta charset="UTF-8" />
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="" />
        background-color: rgba(0, 0, 0, 0);
        border: 0 none;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right center;
        background-size: contain;
        background-image: url("");
        height: 20%;
<!-- MainPage -->
<div data-role="page" data-theme="a" id="Home" class="header-with-logo">
    <div data-role="header" data-position="fixed"></div>
    <div data-role="content">
        <div>Some content</div>
    <div data-role="footer" data-position="fixed">Some ads</div>
<script src=""></script>
<script src=""></script>