NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Jak zařídit responzivní full-page image background bez ořezávání obrázku?

Aktivity
Avatar
Andy.133
Člen
Avatar
Andy.133:11.1.2020 20:33

Ahoj už se teď pár hodin plácám s tím jak zařídit aby pozadí co jsem vložila z bootstrapu, bylo hezký i na mobilu. 8-| A pořád sem to nikde nenašla. Neměl byste někdo nějakou dobrou radu?

Pokud dám background-size: 100% obrázek se mi sice krásně zmenšuje, ale maska ne. Zkoušela sem se vzdát i tý masky a textu ale to se mi mezi fotkou a dalším obsahem vytvořil kilometr volnýho místa.

Děkuji moc :-D

 
Odpovědět
11.1.2020 20:33
Avatar
Jurajs
Člen
Avatar
Odpovídá na Andy.133
Jurajs:11.1.2020 20:44

A co třeba - background-size: cover ;
A nebo v bootstrap má třídu img-responsive nebo tak nějak....To jsou jen tipy ;)

Editováno 11.1.2020 20:46
 
Nahoru Odpovědět
11.1.2020 20:44
Avatar
Andy.133
Člen
Avatar
Andy.133:11.1.2020 20:53

Děkuju za tipy nicméně přesně tohle jsem zkoušela a nefunguje :D :(

 
Nahoru Odpovědět
11.1.2020 20:53
Avatar
Jurajs
Člen
Avatar
Odpovídá na Andy.133
Jurajs:11.1.2020 21:02

A proč to píšeš do HTML tagu, proč si na to nevytvoříš CSS soubor style.css
a nenapíšeš tam tohle:

display: table;
width: 100%;
padding: 0;
background: url(../img/intro-bg.jpg) no-repeat center bottom;
background-size: cover;

Jinak nevím....Lepší to nebude :)

 
Nahoru Odpovědět
11.1.2020 21:02
Avatar
Jurajs
Člen
Avatar
Odpovídá na Andy.133
Jurajs:11.1.2020 21:15

Promiň, nechci ti nějak do toho kecat, ale jestli se učíš teprve html a css a děláš to zrovna v Bootstrap....Tak raději se nauč dělat šablony bez frameworku ;) ....Jen čisté HTML a CSS aspoň víc pochopíš jak to všechno funguje, než jen psát třídy z bootstrapu a pak tam psát nějaké věci, které podle tvých představ nefungují :) Je to jen rada...Já začínal na čistém HTML a CSS...

 
Nahoru Odpovědět
11.1.2020 21:15
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.