Potrzebuję tego, co dokładnie robi następująca strona, ale nie jest to pokaz slajdów, to tylko zanikanie obrazu tła:

http://www.stevenharrisarcistects.com/

Obraz jest w 100% szerokości i 100% wysokości, więc nie ma przycinania, a to właśnie chcę dokładnie. Udało mi się wykonać tę część bardzo łatwo z następującymi kodami:

#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}

Zrobiłem tło wielkości: 100% 100%;

Działa dobrze, ale jedynym problemem, który pozostaje, jest to, że mój klient nie chce zmieniać rozmiaru z wielkością okna, zamiast tego powinno działać jak na stronie, o której wspomniano powyżej (spróbuj zmienić rozmiar okna, a zobaczysz co Mam na myśli).

Nie chcę, aby mój obraz tła do ponownego rozmiaru do 100% szerokości i wysokości mojego okna, chcę, aby działać tak jak w powyższym łączeniu, który udostępniłem.

Również link do mojej witryny:

http://leydenlewis.com/

Każda pomoc byłaby bardzo mile widziana.

4
Hamza Abd Elwahab 26 listopad 2013, 21:40

3 odpowiedzi

Najlepsza odpowiedź

Jeśli chcesz użyć właściwości tła i nigdy nie chcesz, aby obraz został przycięty, należy użyć background-size :contain;

div.big_background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url('http://placekitten.com/g/1200/800') no-repeat center top;
    background-size :contain;
}
2
web-tiki 30 maj 2014, 18:17

Odpowiedź na podstawie opisanego powyżej:

#bg-stat {
  width: 100%;
  height: 100%;
  background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
  background-size: 100% auto;
}

Odpowiedź na podstawie opinii:

CSS:

#bg-stat {
  width: 100%;
  height: 100%;
}

#bg-image {
  background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
  height: 100%;
  width: 100%
  min-width: 1140px; // Based on img dimensions or arbitrary 
  max-height: 735px; // Based on img dimensions or arbitrary
}
1
Oriol 26 listopad 2013, 19:01

Myślę, że potrzebujesz poniżej kodu:

body
{
 background: url(image/background.jpg);
 background-attachment: fixed;
 background-size: cover;
}
1
Ehsan Jelodar 27 listopad 2013, 08:59