Onkos mahdollista "työntää" background-imagea vähän alaspäin. Nyt se näkyy logon takaa ärsyttävästi. Kaikkea mahdollista olen yrittänyt :/
Tässä vielä screenshot: http://i35.tinypic.com/kdk4ye.jpg
Eli tuo punaisella ympäröidyn jutun ei pitäisi näkyä.
Voit varmaan ensin heittää koko laitosta vaikka 10 pikseliä alaspäin ja sen jälkeen laittaa logokuvalle margin-top: -10px; – tämä tosin todennäköisesti leikkaa IE6:ssa ja IE7:ssä sitä logokuvaa sen 10 pikseliä pois, bugisia selaimia kun ovat, mutta muilla selaimilla lopputuloksen pitäisi olla täysin haluttua luokkaa.
Tässä kikassa emme siis siirrä background-imagea alaspäin, vaan siirrämme kaikkea alaspäin ja nostamme vain sitä logokuvaa negatiivisella marginaalilla vähän ylemmäs. Tämän ei pitäisi vaikuttaa isännöivän elementin kokoon ja siten taustakuvan näkyvyyteen siellä taustalla.
Kaikilla selaimilla varmasti toimiva vaihtoehto löytyy myös, mutta se vaatii paljon enemmän koodia, ja esim. logokuvan korkeuden vaihtaminen pitää korjata myös CSS:ssä. Temppuna olisi käyttää position: relative; sekä tarpeeksi yläsisennystä isännöivään elementtiin ja position: absolute; logokuvaan sopivasti negatiivisen top-arvon kera.
Mitenkäs olisi tällainen tyyli?
CSS
foo
{
background-position: 0px 10px;
}Riippuu tietysti minkälainen kuva on kyseessä. Jos kuvan pitää jatkua pystysuunnassa, niin tämä ei hommaa käsittääkseni ratkaise ... :-/
e: huomautus
Eikö nyt kaikkein helpointa tai ainakin selainriippumattominta ole muokata se taustakuva sopivaksi?
Mikäli katsoin oikein, niin kyseessä on pystysuunnassa toistuva taustakuva. Tämä tarkoittaa sitä, että vaikka kuvaa siirtäisi, niin se silti toistuisi myös ylöspäin.
Taustakuvan muokkaaminen taas ei onnistu nimenomaan siitä toistuvuudesta johtuen: voisin veikata että se on vain 1 pikselin korkuinen.
Muokkaa logon taustaa: laita logon yläreunaan toinen kuva (taustalle) ja venytä se 100 prosenttia leveäksi, jolloin ko. kuva peittää virheen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.