Skocz do zawartości
Szukaj w
  • Więcej opcji...
Znajdź wyniki, które zawierają...
Szukaj wyników w...
Wierzchu

Wyświetlanie hero bg image w całości / powiększone logo w navbarze

Rekomendowane odpowiedzi

Dzień dobry,
miałem sporą przerwę od kodowania stron i gdy przyszło co do czego, niemalże na starcie pojawiły się pewne komplikacje. Mianowicie przygotowałem projekt strony, niby wszystko fajnie, ale schody zaczęły się w trakcie kodowania, mianowicie chodzi o to, że mam przyklejony do góry navbar (tak, bootstap), a pod nim na górze strony hero image ustawiony jako tło, na którym jest cytat. W projekcie zrobiłem tak, że jest sobie ten obrazek na 100% szerokości i z bg size ustawionym na cover, a wysokość ustawiona na 100% wysokości z założeniem, że będzie to 100% wysokości ekranu, a nie 100% zawartości atrybutu section. W praktyce wygląda to tak:

Projekt:
[url=https://ibb.co/d4fu3F][img]https://preview.ibb.co/g9r1iF/des.png[/img][/url]

Przeglądarka:
[url=https://ibb.co/m4bCqv][img]https://preview.ibb.co/kejbHa/bro.png[/img][/url]

HTML:[code] <section id="hero"> <p class="quote">Każdy jest geniuszem.<br /> Jeśli jednak zaczniesz oceniać rybę po tym, czy potrafi wspiąć się na drzewo,<br /> przez całe życie będzie sądzić, że jest głupia.<br /> <span class="quote-author">Albert Einsein</span></p> </section>[/code]
CSS (less):[code]// Hero #hero { background: url('../img/heroBg.jpg') center; background-size: cover; p.quote { font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; font-weight: 300; text-align: center; font-size: 44px; color: @bg-text-light; span.quote-author { font-size: 31px; } } }[/code] Kombinowałem na różne sposoby - ustawiałem width / min / max na 100%, ustawiałem height / min / max na 100%, na 1080px, kombinowałem z visibility, overflow, ale bezskutecznie - za każdym razem wygląda tak jak na powyższym obrazku.
Jedyne co sprawiło, że obrazek się powiększył to dodanie do p.quote paddingu na górze i dole na 15-20% - czy jest to jedyna opcja, aby to zadziałało jak na powyższym projekcie?



Żeby nie zakładać dodatkowego tematu zapytam też o kwestię obrazków w navbarze. Mianowicie gdy ustawiam w klasie .navbar-brand logo obrazkowe o wymiarach 318x48px wysokość navbara powiększa się (mimo ustalonej stałej wysokości na 100px) i sam obrazek też się powiększa do około 400x60px i zostaje taki sam nawet po zwężaniu okna przeglądarki. Próbowałem ustawiać stały wymiar (318x48px), ale to nic nie zmieniało, nadal był powiększony. Po sprawdzeniu w Inspektorze w przeglądarce jedyny element, który coś zmieniał to wyłączenie box-sizing, natomiast to dało tylko tyle, że logo wskoczyło do navbara, natomiast rozmiarowo nie zmniejszył się i był w rozmiarze ok. 400x60px. Czy macie może jakieś sugestie co w tym wypadku może pomóc?

Z góry dziękuję za wszelkie odpowiedzi, podpowiedzi. :)
Edytowane przez Gość

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}

bannergrafinity.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D

1675319688_Beznazwy-1.png.316c9402ebfe9e98ad7a6d252d2be251.png

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="Piotrek"][quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D[/quote]
dlaczego nie pomoze?

bannergrafinity.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="JakubWEB"][quote="Piotrek"][quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D[/quote]
dlaczego nie pomoze?[/quote]
bo głównie nie o to chodzi w tym wątku, o czym ty piszesz :D

1675319688_Beznazwy-1.png.316c9402ebfe9e98ad7a6d252d2be251.png

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="Piotrek"][quote="JakubWEB"][quote="Piotrek"][quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D[/quote]
dlaczego nie pomoze?[/quote]
bo głównie nie o to chodzi w tym wątku, o czym ty piszesz :D[/quote]

Ciekawe...

bannergrafinity.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="JakubWEB"][quote="Piotrek"][quote="JakubWEB"][quote="Piotrek"][quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D[/quote]
dlaczego nie pomoze?[/quote]
bo głównie nie o to chodzi w tym wątku, o czym ty piszesz :D[/quote]

Ciekawe...[/quote]
No ciekawe. Czytałeś w ogóle temat? Kolega napisał, że ustawiał na 100% i nie działa mu bg, a Ty mu podpowiadasz, że ma to zrobić :wut::facepalm:

1675319688_Beznazwy-1.png.316c9402ebfe9e98ad7a6d252d2be251.png

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="Piotrek"][quote="JakubWEB"][quote="Piotrek"][quote="JakubWEB"][quote="Piotrek"]

xD nie pisz czegoś co nie pomoże :D[/quote]
dlaczego nie pomoze?[/quote]
bo głównie nie o to chodzi w tym wątku, o czym ty piszesz :D[/quote]

Ciekawe...[/quote]
No ciekawe. Czytałeś w ogóle temat? Kolega napisał, że ustawiał na 100% i nie działa mu bg, a Ty mu podpowiadasz, że ma to zrobić :wut::facepalm:[/quote]
Przeczytałem, i mu dobrze podpowiedziałem ;)

bannergrafinity.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
To na pewno działa poprawnie:
#hero {
height: 100vh
}
przykład masz tutaj:
https://codepen.io/arces92/pen/mmvLag

Powiększ sobie po prawej stronie na full page (change view -> full page).

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote]Kombinowałem na różne sposoby - ustawiałem width / min / max na 100%, ustawiałem height / min / max na 100%, na 1080px, kombinowałem z visibility, overflow, ale bezskutecznie - za każdym razem wygląda tak jak na powyższym obrazku. [/quote]

1675319688_Beznazwy-1.png.316c9402ebfe9e98ad7a6d252d2be251.png

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
[quote="Piotrek"][quote="JakubWEB"]Jeśli chcesz ustawić obrazek na całą szerokość ekranu uzyj tego:
obrazek{
height: 100vh;
width: 100vw;
background: url(obrazek.jpg) center;
background-size: cover;

}


A co do tekstu:
txt{
position:absolute;
top: 50%;
left: 50%;
margin-left: -55px; [podany przyklad musisz sie pobawic]
margin: top: -55px; [podany przyklad musisz sie pobawic]
}[/quote]

xD nie pisz czegoś co nie pomoże :D[/quote]
A jednak pomogło, dokładnie o to chodziło :)
Dziękuję @JakubWEB

@Piotrek - Margin od góry? Rozumiem, że chodzi Ci o #hero, tak? Jeśli tak, to jest to zbędne :)
[quote="Arces"]To na pewno działa poprawnie:
#hero {
height: 100vh
}
przykład masz tutaj:
https://codepen.io/arces92/pen/mmvLag

Powiększ sobie po prawej stronie na full page (change view -> full page).[/quote]
Dokładnie, działa poprawnie :) Dorzuciłem jeszcze atrybuty do tekstu od @JakubWEB i jest cacy :)


Dziękuję Panowie za pomoc, nie znałem jednostki vh, która okazała się tu ratunkiem, ale człowiek uczy się całe życie :)

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.