Support Volgende » CSS / opmaak vragen Volgende » Header aanpassen voor Retina scherm

  • Ik wil graag de header van mijn website scherper maken op retina schermen door middel van het verdubbelen van het aantal pixels van de afbeelding.
    Bij de header gaat dit fout omdat dan de oorspronkelijke afbeelding wordt bijgesneden in de plaats van dat hij wordt geschaalt.

    Ik ga er vanuit dat het ergens in deze regel moet worden aangepast:
    div.Header-jpeg{position:absolute;z-index:-1;top:0;left:0;width:954px;height:94px;background-image:url('images/Header.png');background-repeat:no-repeat;background-position:center center;}

    De nieuwe afbeelding heeft dus de dubbele afmetingen van 954×94.

    Kan iemand hiermee helpen?

    • Dit onderwerp is gewijzigd 4 maanden, 4 weken geleden door  maikel9112.
1 reactie aan het bekijken (van in totaal 1)
  • Hi Maikel,

    Beetje lastig te zeggen maar met een specifieke media query zou je het moeten kunnen oplossen:

    @media 
    (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
        /* Retina-specifieke styling hier plaatsen */
    }

    Succes,
    Niels

1 reactie aan het bekijken (van in totaal 1)