naast background image nog een image
Met CSS heb ik een background image ingesteld.
Code (php)
1
2
3
4
5
2
3
4
5
#header{
width: 100%;
height: 250px;
background: url(images/header.png) center top no-repeat;
}
width: 100%;
height: 250px;
background: url(images/header.png) center top no-repeat;
}
Nu wil ik er naast nog een image van 1px die werkt met x-repeat (header-opvul.png)
Alleen hij mag absoluut niet onder/boven de header.png komen! Hij mag er dus echt alleen naast
Weet iemand hoe ik dit het beste kan aanpakken?
(Tussen de header.png en header-opvul.png mag geen ruimte zitten)
(De header.png is 1250px breed)
Gewijzigd op 29/06/2013 11:36:47 door Tom aan t Goor
Volgens mij kun je maar één background image aan een element toevoegen dus zul je de header div moeten verdelen in twee onderliggende divs.
Code (php)
1
2
3
4
2
3
4
<div id="header">
<div id="header-left"></div>
<div id="header-right"></div>
</div>
<div id="header-left"></div>
<div id="header-right"></div>
</div>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#header{
background-image: url('afbeelding 1'), url('afbeelding 2');
background-position: top left, top right;
background-repeat: no-repeat;
}
[/CODE]
background-image: url('afbeelding 1'), url('afbeelding 2');
background-position: top left, top right;
background-repeat: no-repeat;
}
[/CODE]
Ik heb van mijn stukje code nu dit gemaakt:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#header{
background-image: url(images/header.png), url(header-bg-vul.png);
background-position: top left, top right;
background-repeat: no-repeat, repeat-x;
background-color: #FF0000;
}
background-image: url(images/header.png), url(header-bg-vul.png);
background-position: top left, top right;
background-repeat: no-repeat, repeat-x;
background-color: #FF0000;
}
Alleen ik begrijp iets niet, ik zie nu helemaal niks meer. Ook niet de rode achtergrond (om te testen).
Dat is lastig om zo te zien wat er aan de hand is.
Kun je misschien de HTML ook plaatsen?
Gr. Robert
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navigation">
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navigation">
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
En hier mijn volledige CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset "utf-8";
html, body{
margin: 0;
padding: 0;
}
body{
background: #F6F6F6;
}
#header{
background-image: url(images/header.png), url(header-bg-vul.png);
background-position: top left, top right;
background-repeat: no-repeat, repeat-x;
background-color: #FF0000;
}
html, body{
margin: 0;
padding: 0;
}
body{
background: #F6F6F6;
}
#header{
background-image: url(images/header.png), url(header-bg-vul.png);
background-position: top left, top right;
background-repeat: no-repeat, repeat-x;
background-color: #FF0000;
}
nu is je header 0px hoog dus zie je niks ;)
Mijn header is weer terug.
Ik zie de andere background image ook.
Alleen er is nog een probleempje.
Beide images hebben aan de onderkant een stuk schaduw waardoor ze niet boven elkaar mogen (omdat op dat stuk de schaduw dan 2 keer zo donker is).
Kan ik dit ook nog oplossen?
Een andere optie is bij 1 van de twee de schaudw weghalen, en een 3e optie is zorgen dat de schaduw van de 1 stop waar de andere begint.
De middelste image is niet recht maar heeft een aantal 'heuvels'.
Hierdoor gaat het eerste idee volgens mij al niet door.
Ik wil wel overal van de header een schaduw hebben, hierdoor gaat het 2e idee ook al niet door.
En uit je 3e optie begrijp ik dat de background moet stoppen als de andere begint.
Maar hoe moet dat :p?