Skocz do zawarto軼i


 

Zdj璚ie

GIF jako t這 skalowanie

GIF jako t這 skalowanie gif css html tlo

  • Prosz si zalogowa aby odpowiedzie
9 odpowiedzi na ten temat

GIF jako t這 skalowanie

#1 j x

j x

    Nowy u篡tkownik

  • U篡tkownicy
  • 4 post闚

Napisany 22 sierpie 2017 - 11:36

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? 


  • 0

#2 Fizyda

Fizyda

    Sta造 u篡tkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 post闚

Napisany 22 sierpie 2017 - 12:30

background-size: cover


  • 0

#3 j x

j x

    Nowy u篡tkownik

  • U篡tkownicy
  • 4 post闚

Napisany 22 sierpie 2017 - 12:47

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


  • 0

#4 Fizyda

Fizyda

    Sta造 u篡tkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 post闚

Napisany 22 sierpie 2017 - 12:51

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


  • 0

#5 j x

j x

    Nowy u篡tkownik

  • U篡tkownicy
  • 4 post闚

Napisany 22 sierpie 2017 - 13:01

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


  • 0

#6 Fizyda

Fizyda

    Sta造 u篡tkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 post闚

Napisany 22 sierpie 2017 - 13:07

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.


Edytowany przez Fizyda, 22 sierpie 2017 - 13:09.

  • 0

#7 j x

j x

    Nowy u篡tkownik

  • U篡tkownicy
  • 4 post闚

Napisany 22 sierpie 2017 - 13:25

Chrome

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

*Posiadam linuxa czy to coś zmieni? 


Edytowany przez j x, 22 sierpie 2017 - 13:30.

  • 0

#8 Fizyda

Fizyda

    Sta造 u篡tkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 post闚

Napisany 22 sierpie 2017 - 14:12

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.


  • 0

#9 Go嗆_Rafiki_*

Go嗆_Rafiki_*
  • Go軼ie

Napisany 22 sierpie 2017 - 21:43

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.


Edytowany przez Rafiki, 22 sierpie 2017 - 21:44.

  • 0

#10 Fizyda

Fizyda

    Sta造 u篡tkownik

  • WHT Pro
  • PipPipPipPipPip
  • 495 post闚

Napisany 22 sierpie 2017 - 22:04

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%


  • 0






Tak瞠 otagowane jednym lub wi璚ej z tych s堯w kluczowych: gif, css, html, tlo

0 u篡tkownik闚 czyta ten temat

0 u篡tkownik闚, 0 go軼i, 0 anonimowych u篡tkownik闚