Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

CSS kód a G-Portálon
CSS kód a G-Portálon : Háttér nem csúszik el

Háttér nem csúszik el


Nagyon sok kérdést kapok azzal kapcsolatban, hogy hogyan kell úgy a hátteret beállítani egy oldalon, hogy az semmilyen felbontásban ne csússzon el. Teljesen egyszerű ezt beállítani, de azért leírom részletesen is.

  • a háttér mindegy milyen széles
  • de javaslom szorítkozzunk az inkább keskenyebb hátterekre és a fennmaradó üres részt pedig töltsük ki színnel. Ez azért javasolt, mert aki nagy monitoron vagy már inkább óriás TV képernyőn nézi a weboldalt, azért annak is mutasson valahogy. Most már arra is gondolni kell, hogy vannak akik TV képernyőn interneteznek.
  • teljesen mindegy, hogy a háttered milyen, mert minden beállítást a CSS kódban adunk meg. Úgy értem lehet színátmenetes a háttér függőlegesen vagy vízszintesen, vagy háttérkép, aminek a két oldalát még extra dolgok díszítik, meg ilyesmi. Ezekre példát is hozok a cikkben.

Kezdjük a függőleges színátmenetes háttérrel. Az én hátterem mérete 50 pixel széles és 1000 pixel magas. Itt megnézheted a háttérképet. Alul, ahol végetér a háttér, majd háttérszínt adok meg a CSS kódban, hogy szépen mutasson ott is. A CSS kód pedig így néz ki hozzá:

body {
    background: url(ide jön a képed URL címe) top left repeat-x #e19e43;
    cursor: default;
    font-family: Georgia;
    font-size: 15px;
    color: #585858;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
}

A background rész magyarázata:
url: a háttered URL címe.
top left: ezzel állítod be, hogy a háttér hol helyezkedjen el az oldaladon. Jelenleg ez felül a lap tetejére van állítva és balról indul jobbra. Az-az fentről jön lefelé és balról jobbra.
repeat-x: ezzel állítod be, hogy hogyan ismétlődjön a háttered. Ez a függőleges ismétlődés.
színkód: a fennmaradó üres részen, ahol nem lesz háttérkép ott háttérszín lesz, ami egybe fog olvadni a háttérképpel ott, ahol lefelé a háttérkép véget ér.

 

Vízszintes színátmenetes háttér: Az én hátterem mérete: 1920 pixel széles és 100 pixel magas. Itt megnézheted a háttérképet. Itt is a CSS kód beállításán múlik, hogy hogyan helyezed el a hátteret.

body {
    background: url(ide jön a képed URL címe) top center repeat-y #ffc580;
    cursor: default;
    font-family: Georgia;
    font-size: 15px;
    color: #585858;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
}

A background rész magyarázata:
url: a háttered URL címe.
top center: ezzel állítod be, hogy a háttér hol helyezkedjen el az oldaladon. Jelenleg ez felül a lap tetejére van állítva és középről indul lefelé. Az-az fentről jön lefelé és minden monitoron középre van állítva, tehát elcsúszás nem lehet.
repeat-y: ezzel állítod be, hogy hogyan ismétlődjön a háttered. Ez a vízszintes ismétlődés.
színkód: a fennmaradó üres részen, ahol nem lesz háttérkép ott háttérszín lesz, ami egybe fog olvadni a háttérképpel ott, ahol a két végén véget ér a háttérkép.

 

Egyedi háttérkép: Itt megnézheted a háttérképet. Itt is a CSS kód beállításán múlik, hogy hogyan helyezed el a hátteret. Az ilyem háttereket általában ugyan úgy kell beállítani a CSS kódban, mint a vízszintes színátmenetes hátteret is.

body {
    background: url(ide jön a képed URL címe) top center repeat-y #d4dc48;
    cursor: default;
    font-family: Georgia;
    font-size: 15px;
    color: #585858;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
}

A background rész magyarázata:
url: a háttered URL címe.
top center: ezzel állítod be, hogy a háttér hol helyezkedjen el az oldaladon. Jelenleg ez felül a lap tetejére van állítva és középről indul lefelé. Az-az fentről jön lefelé és minden monitoron középre van állítva, tehát elcsúszás nem lehet.
repeat-y: ezzel állítod be, hogy hogyan ismétlődjön a háttered. Ez a vízszintes ismétlődés.
színkód: a fennmaradó üres részen, ahol nem lesz háttérkép ott háttérszín lesz, ami egybe fog olvadni a háttérképpel ott, ahol a két végén véget ér a háttérkép.

Próbálgassátok a kódokat és meglátjátok milyen egyszerű is vele olyan hátteret adni az oldaladnak, ami nem csúszik el semmilyen felbontásban sem :)

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Ne maradj le semmirõl, értesülj elsõ kézbõl a Selena Gomezzel kapcsolatos hírekrõl! Hat éve várja a látogatókat az oldal    *****    Református exmisszus-gyakornok, jégkorong, izomautók, rap zene. Igen, ez mind én vagyok! Hogyan? Nézz be és megtudod! :)    *****    Szeretsz írni? Lenne egy jó témád, amit megosztanál másokkal? Akkor kattints, és nyerj egy vendégposztot nálam! :)    *****    Kedveled Ian Somerhaldert? Odáig vagy a szépséges színésznõért, Nina Dobrevért? Kattints! Nem csak TVD rajongóknak!    *****    Szeretsz filmet nézni? Akkor itt a helyed! Nézz filmet facebook messengeren. Klikk ide!!!!    *****    MAYFLOWER / egy májusban született lány blogja / MAYFLOWER / egy májusban született lány blogja / MAYFLOWER    *****    DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE! DESIGN KÉSZÍTÕT KERESEK! 100 KREDIT ÉS MEGJELENÉS JÁR ÉRTE!    *****    ***Egy blog. Egy lány. Egy élet.*** Ðzsí blogol. *G-PORTÁL KÖZÖSSÉGMENTÉS ugyanitt. Ha hiányzik a régi közösség.*BLOG***    *****    Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok | Furry Fandom | Antropomorf Állatok    *****    Nézz filmet facebook messengeren!!!! Klikk! Klikk!    *****    ONMYMIND \\ EGY ÁTLAGOS SRÁC BLOGOL MINDENRÕL AMI ESZÉBEJUT \\ ZENE, CIKKEK, KRITIKA? KATTINTS ÉS OLVASS MOST KEDVEDRE    *****    **********Rengeteg AKCIÓ! Vegyszermentes kozmetikmok és bio mosó és tisztítószerek, munkalehetõséggel! ***********    *****    OKTATÁS INGYENESEN az ASZTRO-suliban, Asztrológiai tanácsadás BECSÜLET KASSZÁS alapon! Fordulj hozzám bizalommal!    *****    Bûbájos boszorkák - Charmed - Hírek a folytatásról - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed -    *****    LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT * LORDE * ISMERD MEG TE IS * LORDE * ISMERD MEG TE IS A ROYALS ÉNEKESNÕJÉT    *****    Re-Startoltunk! Egy SZEREPJÁTÉK, amelybe bármikor becsatlakozhatsz! Légy te is Hõs! Hõsregék RPG    *****    Nem értesz a CSS kódokhoz/nem tudod egyedül fenntartani oldalad/szeretnél egy társszerkesztõt? Írj nekem! - sakura-ec.gp    *****    ISMERD MEG A GYÖNYÖRÛ OSCAR-DÍJAS SZÍNÉSZNÕT, ALICIA VIKANDERT, AKI A 2018-AS TOMB RAIDER LARA COFTJÁT FOGJA ALAKÍTANI!    *****    "Céljuk fellelni az Egyesülés Pengéjének darabjait, és újra felemelni a Lidérckirályt."    *****    "Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.