NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:22.11.2016 19:11

Čaute,

chtěl bych se zeptat, jelikož googlim a nemohu to najít, nebo nevím jak formulovat můj dotaz. Prostě netuším, jak udělat, že v pozadí je obrázek, ale uprostřed je text/informace (viz. http://www.liverpoolfc.com/) Předem děkuji za radu.

Odpovědět
22.11.2016 19:11
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:23.11.2016 8:36

Ahoj,
dělá se to pomocí css vlastnosti background, která nastaví obrázek na pozadí obalového html elementu (kontejneru)

<!DOCTYPE html>
<html>
<head>
<style>
body{}
.banner{background:url("https://www.w3.org/html/logo/img/class-header-css3.jpg") no-repeat center top;position:relative;width:495px;font-size:20px;font-weight:bold;letter-spacing:2px}
.banner div{color:white;margin:10px}
.text-top-left{position:absolute;top:0;left:0}
.text-bottom-right{position:absolute;right:0;bottom:0}
</style>
</head>
<body>

<div class="banner" style="height:300px">
  <div class="text-top-left">Tvůj text v levém horním rohu</div>
  <div class="text-bottom-right">Tvůj text v pravém dolním rohu</div>
</div>

</body>
</html>

Vyzkoušej si to na w3schools Playground

Nahoru Odpovědět
23.11.2016 8:36
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:23.11.2016 20:12

Myslel jsem to spíše takto, nemyslím psát přes obrázek, ale mít jako by na tom obrázku nějaký textbox/obrázek a přes ten až psát. viz. http://www.img.tpx.cz/…oguwegwe.png

Nahoru Odpovědět
23.11.2016 20:12
Neaktivní uživatelský účet
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:23.11.2016 20:34

Ahoj, zkus tohle:

background-attachment: fixed;
:)
 
Nahoru Odpovědět
23.11.2016 20:34
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:24.11.2016 10:35

Nemyslím to jako čisté pozadí, na které se píše, ale něco jako je napříkald tohle: http://www.liverpoolfc.com/ , že je fixnuté pozadí a přes něho je +/- uprostřed "textbox," v kterém je text a informace.

Nahoru Odpovědět
24.11.2016 10:35
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:24.11.2016 12:38

Veď normálne máš body s obrázkom ako background a vnútri body más divko, nejaký page_wrap, ktorý má max width povedzme 1000px, margin auto, aby bol na stred a biely background. Mať čas spravím ti jsfiddle no snáď si pochopil :)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
24.11.2016 12:38
Find what you love and let it kill you.
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:24.11.2016 12:44

tak ešte predsa len ten JSFIDDLE

Nahoru Odpovědět
24.11.2016 12:44
Find what you love and let it kill you.
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:24.11.2016 14:57

Sedl jsem si nad to a vyřešil to takto, takže se to podobá tomu tvému.

.center{
    text-align: center;
    margin: auto;
    width: 850px;
    height: auto;
    background-color: #dddddd;
}
Nahoru Odpovědět
24.11.2016 14:57
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ján Timoranský:24.11.2016 15:09

Rád som pomohol :)

Nahoru Odpovědět
24.11.2016 15:09
Find what you love and let it kill you.
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 9 zpráv z 9.