CSS-ben ezt hogy lehet megoldani?
Azt szeretném, hogy az oldalam hátterének legyen egy képe, ami középen fent helyezkedik el, és nem ismétlődik, és nem nagyítja ki! Amit a kép nem fed le, azt a részt feketére szeretném színezni.
Jelenleg így néz ki a CSS-ben a háttér:
body{
background: url(../images/bg.jpg);
}
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
body{
background-image: url('../images/bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-color: #000000;
}
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
Rövidebben:
background: black url(../images/bg.jpg) top center no-repeat;
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
H.Tibor87
Amit lehet, mindent rövidíteni kell.
border, padding, margin, font, background, stb...
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
H.Tibor87
A shorthand miért lenne elavult?
[link] -> Background - Shorthand property
meg amúgy is:
______________________
padding-top: 25px;
padding-right: 50px;
padding-bottom: 75px;
padding-left: 100px;
______________________
vagy
______________________________
padding: 25px 50px 75px 100px;
______________________________
Szerinted melyik jobb, vagy melyik tűnik "elavultnak"?:)
A background-al ugyan ez a helyzet.
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
A rövidebb jobb. De még mindig nem értem miért elavult.
És szerinted melyik jobb?
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
vagy
padding: 10px;
Esetleg:
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
vagy
padding: 20px 10px;
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
A font -al voltak gondok, ezzel a tömör alakban.
(nem emlékszem már, de talán IE nem csipázta)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
Kicsit figyelmetlen vagyok. :D
Úgy láttam a 7-es válaszoló is H.Tibor87 volt.
Elnézést.
További kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!