CSS-ben lehet képet berakni?

Hát képet azt sima CSS kóddal nem nagyon lehet beilleszteni :/ A CSS az az elemek "stylusának" a testreszabására van kitalálva, a CSS kódokban csak a tulajdonságokat tudod módosítani.

Ahhoz, hogy egy képet beszúrj valahova, annak ott kell lennie a HTML kódban, ugye az <img src="" ...>.

De nézz utána, hogy egy képnek mennyi tulajdonságát lehet állítani, tuti, hogy találsz valami jót :)

1. Logót is háttérképpel csinálj, a logó nevét írd be HTML-be és CSS-el úsztasd ki a szöveget.

<a href="#">Logó akármi</a>

.logo {

display: block;

width: 200px;

height: 200px;

text-indent: -9999px;

background: url('kep/logo.png');

}

2. Úsztass egymás mellé két div-et.

<div class="container">

<div class="first"></div>

<div class="second"></div>

</div>

.container {

overflow: hidden;

width: 1000px;

margin: 50px auto;

}

.first, .second {

float: left;

}

.first {

width: 250px;

}

.second {

width: 750px;

}

Egy elem előtt vagy után be tudsz szúrni képet CSS-el is, ha használod a :before/:after selectort. Content tulajdonságnak meg lehet adni url-t és a ma használatos böngészőkön meg fog jelenni. Bár a logo-t szerintem jobb ötlet belerakni a html-be.

Az oszlopokra már írtak egy megoldást, de ha szereted az újdonságokat, akkor keress rá a flexbox-ra.