background image resize probleem

Status
Niet open voor verdere reacties.

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Bij de volgende (responsive) website die ik heb gemaakt (nog in test) link naar site doet background plaatje resizen niet goed bij Safari.

In de div #content-top (onder #wrapper-content) zet ik een background-image: url('images/top-background.jpg'); en die had ik eerst een background-size: 1980px 666px; meegegeven. Dat werkte goed behalve bij een 27 inch scherm zat het plaatje naar links. :( Op zich logisch vanwege de vaste pixels lijkt mij.
Ik heb toen die CSS regel vervangen door background-repeat: repeat-x; en op IE, Chrome, FF ziet het er bij mij goed uit maar op Safari gaat het mis, plaatje wordt niet hoog genoeg.

Ik gebruik media queries en de CSS waar het om gaat is deze

Wat te doen? Dank je! :thumb:


oh aanvulling, op volgende responsive testsite zie je wat ik bedoel: responsivetest.net
 
Laatst bewerkt:
Ik weet niet of je het hebt opgelost. Maar in mijn browsers doet hij in firefox en safari precies hetzelfde.

Mocht het bij jou niet zo zijn (kan best zijn dat ik er overheen kijk) kan je altijd proberen een safari css hack voor dat element ertussen te zetten zodat het alleen in safari anders uitpakt. Het is niet de netste manier, maar kan helpen bij het verhelpen van browser specifieke problemen.

Linkje: http://browserhacks.com/
 
Goedemorgen Feint, nee nog niet opgelost althans bij mij ;) Heb je ook al op linkje responsivetest.net geklikt? Browserhacks zal ik doornemen, misschien dat het daarmee lukt.
 
Ik had inderdaad op het linkje van responsivetest gekeken.
Ik kreeg ook daar in Firefox hetzelfde als in Opera, namelijk dat hij de gezochte pagina binnen de test website niet kon vinden, die pagina had wel een bruine rand onder de foto zitten, De pagina zelf, waar diensten etc. op staat ziet er bij mij hetzelfde uit. Misschien dat je een foto kan plaatsen? voor hetzelfde geld kijk ik er dubbel en dwars overheen ;)
 
Ah dank je @feint. Zie dit voorbeeld: voorbeeld1.jpg

Als ik dus browser window resize background image steeds kleiner, wat goed is, maar blijft tekst Diensten op zelfde plek staan :confused:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan