Pozadi na celou stranku bez použití absolutního umístění

5. 8. 2011 11:20:08

Zdravím,

mám takový problém, že potřebuji roztáhnout obrázek po celém displayi. Vím, že se to už mnohokrát řešilo, a proto jsem si vše přečet. Nakonec se mi tedy povedlo roztáhnout obrázek přes celou šířku obrazovky, ale radost z pokoření problému netrvala dlouho. Náhle jsem zjistil, že bylo potřeba umístit obrázek pomocí absolutního umístění, z čehož plyne, že aby byly "objekty", které se mají na pozadí objevit vidět, budou se muset napozicovat, aby jakoby překryly pozadí. Mně bohužel pozicování moc nejde, a po předešlých radách ( kdy jsem měl jiný problém), jsem začal používat plavání, to zde však nelze...(bez napozicování nadřazeného elementu) .

Jediné možné řešení, které mne napadlo byla tabulka, tu jsem ale ihned zavrhl...

Otázka tedy zní, jde nějak obrázek roztáhnout přes celou obrazovku bez použití pozicování, nebo existuje snad nějaký jiný způsob, jak tento problém vyřešit ? ( Aby šly prvky na pozadí normálně umístovat pomocí float).

Díky za rady :)

5. 8. 2011 11:20:08

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663419

nline

(1 hodnocení)

5. 8. 2011 11:26:22

Pokud dáš prvku body dostatečně velký obrázek jako pozadí s parametrem background-position: center center, máš ho krásně vycentrovaný přes celou plochu prohlížeče. Pokud se pletu, někdo mě opravte :)

// A centrovat ho ani nemusíš - umísti si ho jak je libo :)

5. 8. 2011 11:26:22

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663418

Jakub Hošek

(23 hodnocení)

5. 8. 2011 11:29:40

No, jde mi o to aby byl přes celou stránku obrazovky, at je velká xxx/xxx px nebo yyy/yyy px.

momentálně to mám vyřešené takto:

html:

css:

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}

#background{ position:absolute; z-index:1; width:100%; height:100%;}

5. 8. 2011 11:29:40

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663417

Roman Bartoš

(4 hodnocení)

5. 8. 2011 11:39:35

Tohle ti roztáhne (zmenší) obrázek přesně podle velikosti body. Jak na šířku, tak na výšku. To ale moc logický neni, protože ten obrázek nebude držet poměry stran. Doporučuju ho roztahovat buď podle šířky (background-size: 100% auto;) a nebo podle výšky (background-size: auto 100%;).

http://www.w3.org/TR/css3-background/#the-background-size

5. 8. 2011 11:39:35

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663416

(20 hodnocení)

5. 8. 2011 11:41:33

nejak nechapu problem... proste dej z-index: -1000; cimz ho posles do pozadi za vsechny ostatni prvky a je vyreseno ne?

5. 8. 2011 11:41:33

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663415

Jakub Hošek

(23 hodnocení)

5. 8. 2011 11:47:12

Díky,

o tom jsem také slyšel,

ale vzhledem tomu že background-size je vlastnost které je jen v css3 (pokud se nepletu), funguje jen v relativně malém procentu prohlížečů, resp. zhruba 50% uživatelů to nebude fungovat...

5. 8. 2011 11:47:12

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663414

(20 hodnocení)

5. 8. 2011 11:50:41

kvuli ie je background.size pomerne spatne pouzitelne zatim... takze to klidne res obrazkem, ale nastav mu z-index -1 nebo rovnou -1000 tim ho posles pod vsechyn ostatni prvky, kdyz mu das 1 tak ho naopak posilas nad vsechny prvky pac pokud se nepletu tak defaultne ma kazdej prvek z-index :0

pripadne http://nanotux.com/blog/fullscreen/

5. 8. 2011 11:50:41

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663413

Jakub Hošek

(23 hodnocení)

5. 8. 2011 11:53:55

Díky, toto by možná mohlo fungovat :)

5. 8. 2011 11:53:55

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663412

Jakub Hošek

(23 hodnocení)

5. 8. 2011 11:56:27

Moc se omlouvám, omylem jsem téma zamkl...

zde je odkaz na předchozí odpovědi + na mou otázku :)

http://webtrh.cz/147966-pozadi-celou-stranku-pouziti-absolutniho

---------- Příspěvek doplněn 05.08.2011 v 11:58 ----------

Tak to co radil aleš nefunguje,

už před tím měli totiž ostatní elementy z-index 100, takže byly nad pozadím.

Když ale vymažu z obalového prvku všech elementu nad pozadím position:relative; zmizí...

5. 8. 2011 11:56:27

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663411

funfactory

(1 hodnocení)

5. 8. 2011 11:59:16

Podívej se na www.liptovskymikulas.cz, pokud použiješ v prohlížeči oddálení (ctrl+kolečko myši), tak se pozadí drží na středu.

Pokud je to to co hledáš (nevím?), tak stačí do CSS napsat:

body { background-image: url('img/text.jpg'); background-repeat: no-repeat; background-position: top center; }

5. 8. 2011 11:59:16

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663410

(20 hodnocení)

5. 8. 2011 11:59:23

jezis... tema muzes normalne odemknout uplne stejne tak jako si ho zamknul, takze tohle smaz a pokracuj v tom starem

5. 8. 2011 11:59:23

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663409

Jakub Hošek

(23 hodnocení)

5. 8. 2011 12:05:37

Bohužel nevím jak :(

funfactory:

toto nechci, ale chci zachovat určitou flexibilitu jako máš ty. Podívej se na to takhle, kdybych měl tvou stránku, chtěl bych, aby se s ní dalo stejně zacházet jako ted s tím rozdílem, že by jsem chtěl být na pozadí obrázek (né způsobem background-repeat ale tak, aby to byl 1 obrázek roztažený individuálně na celý monitor)

5. 8. 2011 12:05:37

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663408

(20 hodnocení)

5. 8. 2011 12:13:22

nahore na dprvnim prispevkem v liste "Nástroje témat" ...

jinak resnei mas tady http://stackoverflow.com/questions/4806310/ie-background-size-not-working

5. 8. 2011 12:13:22

https://webtrh.cz/diskuse/pozadi-na-celou-stranku-bez-pouziti-absolutniho-umisteni#reply663407

Jakub Hošek

(23 hodnocení)

5. 8. 2011 12:28:49

To moc nechápu..