GIF jako tło skalowanie

[j x 0]

Hej,

Mam taki problem odnośnie CSS i tła, które nie jest dobrze dopasowane.

Tutaj jest mój kod CSS

	  header.starty {
  text-align: center;
  color: white;
  background-image: url("../img/large.gif");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%; }
	  header.starty .gaziorek {
    padding-top: 150px;
    padding-bottom: 100px; }
    header.starty .gaziorek .naglowek {
      font-size: 40px;
      font-style: italic;
      line-height: 40px;
      margin-bottom: 25px;
      font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    header.starty .gaziorek .pytanie {
      font-size: 50px;
      font-weight: 700;
      line-height: 50px;
      margin-bottom: 25px;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-transform: uppercase; } }
	  
	  
	  @media (min-width: 768px) {
  header.starty .gaziorek {
    padding-top: 300px;
    padding-bottom: 200px; }
    header.starty .gaziorek .naglowek {
      font-size: 40px;
      font-style: italic;
      line-height: 40px;
      margin-bottom: 25px;
      font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    header.starty .gaziorek .pytanie {
      font-size: 75px;
      font-weight: 700;
      line-height: 75px;
      margin-bottom: 50px;
      font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-transform: uppercase; } }
	  
	  

Problem polega na tym, iż jeżeli mam ustawione przybliżenie 100% strony wszystko jest ok, zaś gdy chcę oddalić troszkę pojawiają się białe marginesy. W przypadku większego monitora automatycznie pojawiają się.

Obraz jest dopasowywany do szerokości ale już nie do pionu. Jak rozwiązać ten problem?

[Fizyda 34]

background-size: cover

[j x 0]

Próbowałem to ale wciąż jest tak samo.

[Fizyda 34]

Daj przykład na jakimś fiddlu bo ciężko powiedzieć czemu nie działa.

[j x 0]

http://spearmint5.nazwa.pl/s1/ tutaj jest wgrana strona

[Fizyda 34]

A na jakiej przeglądarce sprawdzasz? Bo u mnie działa.

 

EDIT:

Sprawdziłem też na chrome opera i safari (windows) wszędzie działa.

Edytowano Sierpień 22, 2017 przez Fizyda (zobacz historię edycji)

[j x 0]

Chrome

U mnie wygląda to tak: http://imgur.com/a/yjUsg

*Posiadam linuxa czy to coś zmieni?

Edytowano Sierpień 22, 2017 przez j x (zobacz historię edycji)

[Fizyda 34]

Nie powinno mieć znaczenia. Przecież na screenie wszystko jest ok. Gdzie Ty widzisz problem? Tło zajmuje całą powierzchnię headera zarówno w pionie jak i poziomie.

[Gość Rafiki]

Jeśli rozciągniesz tło w pionie i w poziomie licz się ,że obraz zostanie zdeformowany (zmienione zostaną jego proporcje).

 

Spróbuj dodać do css:

header.masthead { background-size:100% 100%; }
HTML, BODY, header { height:100%; }

Powinieneś uzyskać efekt jaki chcesz.

Edytowano Sierpień 22, 2017 przez Rafiki (zobacz historię edycji)

[Fizyda 34]

Jeśli rozciągniesz tło w pionie i w poziomie licz się ,że obraz zostanie zdeformowany (zmienione zostaną jego proporcje).

 

Dlatego używa się parametru cover dla backgroud-size a nie 100%