Pracuję nad stroną internetową, w której chciałbym, aby obraz tła wypełniał cały ekran, nawet jeśli jego część jest odcięta. background-size: cover Właściwość CSS działa świetnie w Chrome i Safari. Jednak, gdy próbuję otworzyć stronę w Firefoksie, cały obraz wygląda zbyt wysoko, z dnem jest background-color które wybrałem. Dlaczego tak się dzieje i co mogę zrobić, aby temu zapobiec?
Ponadto mam background-position: right center i próbowałem dodawać -moz-background-size i -moz-background-position właściwości, bez szczęścia.
Oto odpowiedni CSS:
-moz-background-size: cover;
background-size: cover;
-moz-background-position: right center;
background-position: right center;
EDYCJA: Oto strona internetowa: crowdsparked.com
Odpowiedzi:
1 dla odpowiedzi № 1Miałem podobny problem - stwierdziłem, że chociażrozmiar tła pokrywa ekran, wysokość ciała nie była całym ekranem, więc kiedy używam następnej 50% w dół od góry, był on umieszczony wyżej niż chciałem. Kiedy dodałem szerokość: 100% i wysokość: 100%, które to naprawiło (również margines: 0px, aby zapobiec przewijaniu).
1 dla odpowiedzi nr 2
Spróbuj użyć tego stylu:
background-attachment: fixed;
0 dla odpowiedzi № 3
Wypróbuj to w swoim css:
background-size: contain;
//or this:
background-size: cover;
Nie musisz poprzedzać żadnej z tych opcji. Oto specyfikacja moz, która wyjaśnia lepiej niż ja kiedykolwiek:
Zawierać
Wartość zawiera określa, że niezależnie odrozmiar pola zawierającego, obraz tła powinien być przeskalowany w taki sposób, aby każda strona była możliwie jak największa, nie przekraczając długości odpowiedniej strony pojemnika.
Pokrywa
Wartość okładki określa tłoobraz powinien być tak mały, jak to możliwe, przy jednoczesnym zapewnieniu, że oba wymiary są większe lub równe odpowiedniemu rozmiarowi pojemnika.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size