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!

Diskuze: Vložení obrázků do portfolia jako pozadí v CSS

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Martin Švejda
Člen
Avatar
Martin Švejda:17.8.2016 8:42

Zdravím,
moc Vás prosím někoho o radu, nevím si s tím rady už několik dní. Na svůj prezentační web si chci vložit porfolio obrázků pomocí Mixitup. Chci do toho vkladat obrazky v css jako pozadí, ale když to zapíši ve style souboru jak je níže uvedeno tak se ten jeden obrazek opakuje 8x krat.

Dotaz tedy zní - jak zapsat/vložit 8 rozdílných obrázků do Css . Zde se to na jednom foru řeší, je tam odpoved od Luismi a KunkaLabs, že se to musí vložit jako pozadí, ale stále to nechápu. Pokud je můj dotaz nesrozumitelný prosím napište mi to někdo , s HTML začínám a pořád se učím.

<setion id="portfolio">
<h2>Portfolio</h2>
<div class="controls">
<label>Filter:</la­bel>

<button class="filter" data-filter="all">A­ll</button>
<button class="filter" data-filter=".category-1">Logos & graphic design</button>
<button class="filter" data-filter=".category-2">Web design & development</but­ton>

</div>
<div id="imag" class="imag">

<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>

</div>
</section>

CSS soubor - tento zapis u background-image nefunguje, opakuje se mi ten prvni obrazek 8krat.

.imag .mix{
text-align: left;
background-image: url("img/srea­lity.png"), url("img/czb.png");
background-size: cover;
margin-bottom: 2%;
display: none;
}

děkuji za Váš čas.
Martin

 
Odpovědět
17.8.2016 8:42
Avatar
Martin Švejda
Člen
Avatar
Odpovídá na Martin Švejda
Martin Švejda:17.8.2016 8:44

Omlouvam se zapomel jsem vlozit odkaz kde se to řešilo, tady je

https://mixitup.kunkalabs.com/…ding-images/

Martin

 
Nahoru Odpovědět
17.8.2016 8:44
Avatar
Lava
Člen
Avatar
Lava:17.8.2016 8:46

Prečo nedáš každému div-u ešte inú classu a v CSS potom špecifickej classe nastavíš pozadie?
Lebo chápeš, ty teraz máš všetky div-ka rovnako pomenované, preto všetky nadobudnú len ten prvý picture...

Editováno 17.8.2016 8:47
Nahoru Odpovědět
17.8.2016 8:46
Aspartám, sacharín, to je môj vitamín
Avatar
Martin Švejda
Člen
Avatar
Odpovídá na Lava
Martin Švejda:17.8.2016 9:00

Ahoj díky moc za rychlou odpověd,
myslel jsem že ten zápis od Mixitup je daný a nelze ho nějak modifikovat.

myslíš třeba takto?
<div id="imag" class="imag">

<div class="mix category-1" data-myorder="1" class="czbet"></­div>
<div class="mix category-1" data-myorder="1" class="sreal"></div>

</div>
css

.imag .mix .sreal{
text-align: left;
background-image: url("img/srea­lity.png");
background-size: cover;
margin-bottom: 2%;
display: none;
}

.imag .mix .czbet {
background-image: url("img/czb.png");
}

Když to takto zapíši tak mi to nefunguje a vše je prázdné, pokud jsem to špatně pochopil prosím napiš mi to.
dík
M

 
Nahoru Odpovědět
17.8.2016 9:00
Avatar
Lava
Člen
Avatar
Lava:17.8.2016 9:29

<div class="mix category-1 czbet" data-myorder="1"></div>
<div class="mix category-1 sreal" data-myorder="1"></div>

Takto sa píšu viacnásobné classy. Nesmieš mať v jednom <div> viackrát atribút class... napíšeš to do jednej s medzerou medzi názvami. Ak rovnaký názov classy nepoužiješ nikde, stačí ti to v CSS dať ako .czbet, nepotrebuješ písať celý selector.

A ešte takto... všetky obrázky zrejme majú mať rovnaké niektoré nastavenia, napr. text-align, background-size atď. Tak tie daj na classu .mix (to majú všetky) a iba samotnú cestu k obrázku dávaj do tych tvojich class

PS: Netuším čo to je mixitup, takže možno trepem sračky :D

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
17.8.2016 9:29
Aspartám, sacharín, to je môj vitamín
Avatar
Martin Švejda
Člen
Avatar
Odpovídá na Lava
Martin Švejda:17.8.2016 10:14

Díky kámo,

už to funguje, a děkuji moc za přehledné vysvětlení ted´ už to chápu. Dává to i smysl :-)

Martin

 
Nahoru Odpovědět
17.8.2016 10:14
Avatar
Ondřej Langr (andysekcze)
Tvůrce
Avatar
Ondřej Langr (andysekcze):17.8.2016 16:12

Nemůžete používat tlačítko "Vložit zdroják"?

Nahoru Odpovědět
17.8.2016 16:12
I have a charger. I have Note 7. Umh I haven't Note7.
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 7 zpráv z 7.