Ondersteuning » Thema en CSS/opmaak » Header aanpassen voor Retina scherm

Header aanpassen voor Retina scherm

  • maikel9112

    (@maikel9112)


    5 jaren, 9 maanden geleden

    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 5 jaren, 9 maanden geleden door maikel9112.
1 reactie aan het bekijken (van in totaal 1)
  • Niels Pilon

    (@nielspilon)

    5 jaren, 9 maanden geleden

    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)
  • Het onderwerp ‘Header aanpassen voor Retina scherm’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven