Skocz do zawartości
j x

GIF jako tło skalowanie

Polecane posty

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?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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.

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
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 przez Rafiki (zobacz historię edycji)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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%

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×