CSS code voor Retina header file

Janneke
(@janneke1980)

6 jaren, 11 maanden geleden

Ik heb in Artisteer een theme gemaakt en geinstalleerd in een WP site. Nu wil ik door additional CSS coding twee dingen realiseren:
1) dat de header image klikbaar is en naar een URL verwijst
2) dat ik een Retina image file voor de header kan laten tonen voor bepaalde hoge resolutie devices en schermen
Ik heb diverse codes geprobeerd en ook diverse Retina files geupload maar tot zover tevergeefs. Wie kan helpen?

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

Wouter Postma
(@wouterpostmanl)

6 jaren, 11 maanden geleden
Hi Janneke,

Je kunt met de volgende CSS code zorgen dat de retina-versie van je afbeelding als achtergrond wordt gebruikt:
```
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #header {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}
```
Pas uiteraard de background-size, ID van de header en het URL-pad naar de afbeelding aan :-).

Als je header op 200×200 wordt getoond, moet je retina-afbeelding 400×400 zijn.

Succes!
Wouter

PS: Als het niet om een achtergrond-afbeelding gaat dan kun je het retina.js-script gebruiken. Ik heb deze in een handige plugin verpakt: Retina @2x.
Thread starter Janneke
(@janneke1980)

6 jaren, 11 maanden geleden

Hoi Wouter, de plugin Retina @2x had ik al geïnstalleerd maar daarin wordt niet de header van de Artisteer template herkend, dus daar heb ik code voor nodig.
Het betreft een header van een template die gemaakt is in Artisteer, geen achtergrondafbeelding (of is het dat dan wel?)

Hoe kom ik achter de ID van de header? De originele header is 1000×250 pixels dus de Retina file is 2000×500 pixels.
Ik heb je code in de CSS gezet van de template maar ik geloof niet dat het goed is, ik zie geen actie or reactie of verschil.

Is er ook aanvullende code die de header “clickable” maakt?

Wouter Postma
(@wouterpostmanl)

6 jaren, 11 maanden geleden

Beste Janneke,

Gaat het om de website http://thefamilyrules.com/ ?

Zo ja, dan is de header inderdaad een achtergrond-afbeelding, dat is ook de reden dat het retina.js-script dan niet werkt.

Met de code hierboven kun je je header aanpassen.

Succes!
Wouter

Thread starter Janneke
(@janneke1980)

6 jaren, 11 maanden geleden

Beste Wouter, bedankt voorje hulp. Het gaat idd om die site en die header afbeelding=achtergrondafbeelding.
Ik heb de code toegepast maar kan niet zien of het werkt. En header ID waar vind ik die?
Thread starter Janneke
(@janneke1980)

6 jaren, 11 maanden geleden
Excuses Wouter, fijn dat je helpt, toch paar vraagjes:

Pas uiteraard de background-size, ID van de header en het URL-pad naar de afbeelding aan

Is de background-size dan de in de code dan de pixels van originele header grootte of de Retina afbeelding of?
Waar kan ik de header ID vinden?
URL pad naar afbeelding is die van retina afbeelding, toch?

Ik heb deze code toegepast en heb niet de indruk dat het werk of verschil maakt:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#header {
background-image: url(‘http://www.thefamilyrules.com/wp-content/uploads/2017/05/TFR_header@2x.png’);
background-size: 2000px 500px;
}
}
- Deze reactie is gewijzigd 6 jaren, 11 maanden geleden door Janneke.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

Het onderwerp ‘CSS code voor Retina header file’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven