Obrázky

Chcem sa opýtať ako to chodí v praxi učím sa html a css:

1.Ten badge Freeze Delight sa vytvára v HTML a CSS alebo je súčasťou obrázku.

2. Ten zrmzlinový pohár čo je pri text z prava je súčasťou obrázku alebo tiež robený v HTML a CSS.

Pýtam sa preto hlavne pri tom badgy tam keď sa zmenšuje stránka a dám left aj top v % tak sa drží pozície ale ako sa výška automaticky zmenšuje tak už potom je mimo obrázka.

Pri tom poháry to som ešte neskúšal či by sa to držalo rovnako pritom texte ale možno aj áno. Ale zaujímalo by ma ako to chodí v praxi.

nerozumiem, preco sa pytas nas? ved mas otvoreny photoshop s designom, ktory je plny layerov.

ale ja by som ten badge spravil najskor v html css a ten pohar je zas obrazok, ktory ma predpokladam negativny bottom margin a jeho container overflow hidden aby nepretekal do inej sekcie.

badge je jednochy, robil by som ho urcite v html/css.
a ten pohar by som dal ako background-image.

Ten badge sa dá aj nejako inak umiestniť aby keď budem zmenšovať stránku sa furt držal tak isto alebo len cez media queries?

1.sa mi zda že horný header je biely a pritom ma background ktory ale naskoci ked klesnem pod 700px
2. preco v post-footeri ked dma width 25% li sa mi nezmestia do jedneho riadku ?
http://codepen.io/anon/pen/BWMggW?editors=1100#0