Mam tabelkę <table>, której pierwszy wiersz ma tło w postaci obrazka. Chciałbym, żeby obrazek był rozciągany do wysokości wiersza, ale tylko w sytuacji, kiedy wysokość wiersza jest większa niż wysokość obrazka - w przeciwnej sytuacji wysokość obrazka nie ma być skalowana, tylko ma być wyświetlane tyle, ile się zmieści. Jak taki efekt uzyskać?
Myślę, że potrzebny będzie jakiś JavaScript co obliczy wymiary grafiki i tabeli / komórki i będzie to dynamicznie zmieniał w właściwości “background-size”.
background-size: cover Ci nie odpowiada?
1 polubienie
Może po prostu woli ćwiartkę obrazu jak jest 4 razy większy od tabeli.
Tak, ale warto często dopytać bo ludzie bardzo często rozwiązują problem poprzez stworzenie innego problemu i dopiero jego rozwiązanie.
1 polubienie
No właśnie nie do końca odpowiada mi cover. Wiec chyba zastosuję pomysł @krystian3w. Ale przy okazji mam inne pytanie - jak użyć stylu background-image do wyświetlenia dwóch obrazków? Wczoraj o tym poczytałem i to tez byłoby dla mnie rozwiązanie (zamiast skalowania), tyle że albo robię coś źle, albo nie rozumiem działania. Mianowicie mam dwa obrazki png - jeden to tło właściwe, a drugi „efekt” z przezroczystością, nakładany na ten pierwszy. I jak bym ich nie ułożył, to zawsze widoczny jest tylko albo ten pierwszy, albo drugi (a pod nim background-color). Czy wiec da się to w ogóle zrobić? A jeśli tak, to jaka jest prawidłowa „składnia”?
Pierwszy raz o czymś takim słyszę, jedynie gdybyś nałożył drugie tło na ::before albo ::after dla tego kontenera no i je odpowiednio wypozycjonował względem tego kontenera by nachodziło na niego. Niczym się to nie będzie różniło jeśli byś zrobił to z dwoma divami:
<div class="pierwsze-bg">
<div class="drugie-bg">
<div class="content"></div>
</div>
</div>
Jeśli chodzi o rozmiar to zainteresuje się eventem onresize, to Ci załatwi sprawę.
https://www.w3schools.com/css/css3_backgrounds.asp
Ale ok, skoro można to uzyskać i innym sposobem, to tez sprawdzę, dzięki.
-edit eee, tylko jedno „rozwiązanie” na temat można tu oznaczyć? Lipa… 
Pokaż swój kod, który Ci nie działał.
tak wygląda CSS:
.thead_blue {
background-color: #0066a2;
background-image: url(images/tableHeader_blue.png), url(images/tableHeader_shadow.png);
background-position: top left, top left;
background-repeat: repeat-x, repeat-x;
background-size: 996px 100%, 996px 100%;
color: #ffffff;
border-bottom: 1px solid #263c30;
padding: 8px;
overflow: hidden;
}
a tak część HTML (z szablonu MyBB konkretnie):
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead_blue{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>Spróbuj:
background-image: url("images/tableHeader_blue.png"), url("images/tableHeader_shadow.png");
1 polubienie
jak biorę w cudzysłów (albo apostrofy), to w ogóle się coś pieprzy nie tylko z tłem w tej tabelce, ale i w pozostałych - albo nie są wyświetlane w ogóle, albo jest tylko kolor.
https://jsfiddle.net/cuzbh2jm/11/
Najpierw podajesz to tło które jest na górze, potem niżej. Pewnie robisz odwrotnie.
Inny błąd jaki możesz popełniać, to z tego co widzę używasz angulara, react lub inny frontend-owy framework. Głowy sobie uciąć nie dam, ale class="thead_blue{$expthead}" nie zmienia Ci przypadkiem nazwy klasy?
Druga sprawa, nie wiem co dokładnie kodujesz, ale tabel używa się do przedstawiania danych tabelarycznych, a nie rozmieszczania elementów interfejsu. Tak się robiło w latach 90, dziś jest semantic seo więc to nie będzie dobre dla strony.
1 polubienie
problem rozwiązany. 
Tutaj jest rozwiązanie - w MyBB przy opcji wielu obrazków tła w stylach trzeba obrazki “rozbić” na kolejne linijki. Tak zrobiłem i wszystko jest ok.
Dzięki za rady w każdym razie, przydadzą się.
1 polubienie