Bootstrap – background image na levé polovině

18. 10. 2019 11:39:55

Poradí mi prosím někdo? Nejsem schopen vymyslet jak napsat aby #left měl background image až do kraje obrazovky. Obrázek by měl být samozřejmě nedeformovaný a měl by sahat až dolů, tam kde končí "Hodně dlouhý text". Díky moc.

Krátký text

Hodně dlouhý text

18. 10. 2019 11:39:55

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420452

Dominik Nguyen

(36 hodnocení)

18. 10. 2019 12:04:53

Ten bg by si měl dát na container a udělat to tak ať začíná v levo (0) a končí uprostřed (50%). To mi přijde jako nejjednodušší.

18. 10. 2019 12:04:53

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420451

PetrP

18. 10. 2019 12:10:47

container má max-width, nejde až do kraje...nebo radu nechápu. Kdyžtak kód zde https://codepen.io/Sipal/pen/abbmRjb

18. 10. 2019 12:10:47

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420450

Radek Mrázek

(7 hodnocení)

18. 10. 2019 13:23:56

Použijte container-fluid a vynulujte mu padding.

18. 10. 2019 13:23:56

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420449

Dominik Nguyen

(36 hodnocení)

18. 10. 2019 13:29:33

Něco sem narychlo vytvořil zde: https://codepen.io/dominik-wbz/pen/QWWKJzW

18. 10. 2019 13:29:33

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420448

PetrP

18. 10. 2019 13:47:06

@RadekKoder - potřebuji container kvůli layoutu

@webiz.cz - díky, ale nefachá to, obrázek přelézá do spodního divu

Nakonec jsem to nějak vyhackoval přes relative wrapper a absolute img, overflow-x: hidden, padding-left: 500px a margin-left: -500px. Je to divočina,obrázek je tím pádem natažený i mimo screen, ale nejlepší co jsem zatím dokázal.

18. 10. 2019 13:47:06

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420447

Radek Mrázek

(7 hodnocení)

18. 10. 2019 17:00:52

Myslel jsem to takto:

Tedy container obalit container-fluid :) Akorát nevím, zda chápu váš záměr.

18. 10. 2019 17:00:52

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420446

PetrP

19. 10. 2019 09:16:20

Chápu, ale tahle nenastavím background jen v tom levém sloupci. Nebo to neumím. Další problém by pak byl s responzivitou, až se mi pravý sloupec zalomí, tak by to asi nevypadalo dobře. Nicméně, nakonec jsem to vyřešil korektně, přes calc si spočítám potřebný margin a padding wrapperu a funguje to krásně i s responzivitou. Každopádně díky za návrhy.

19. 10. 2019 09:16:20

https://webtrh.cz/diskuse/bootstrap-background-image-na-leve-polovine/#reply1420445

Pro odpověď se přihlašte.

Přihlásit