naast background image nog een image

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

29/06/2013 11:36:06
Quote Anchor link
Hoi,

Met CSS heb ik een background image ingesteld.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
#header{
    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
 
PHP hulp

PHP hulp

23/11/2020 23:34:52
 
Frank Nietbelangrijk

Frank Nietbelangrijk

29/06/2013 12:04:05
Quote Anchor link
ik neem aan dat #header een div is.
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div id="header">
   <div id="header-left"></div>
   <div id="header-right"></div>
</div>
 
Robert Wazzaa

Robert Wazzaa

29/06/2013 13:02:06
Quote Anchor link
je kunt met CSS3 tegenwoordig meerder achtergronden doen, het word dan zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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]
 
Tom aan t Goor

Tom aan t Goor

29/06/2013 13:50:25
Quote Anchor link
@Robert,
Ik heb van mijn stukje code nu dit gemaakt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


Alleen ik begrijp iets niet, ik zie nu helemaal niks meer. Ook niet de rode achtergrond (om te testen).
 
Robert Wazzaa

Robert Wazzaa

29/06/2013 13:52:17
Quote Anchor link
beste Tom,

Dat is lastig om zo te zien wat er aan de hand is.
Kun je misschien de HTML ook plaatsen?

Gr. Robert
 
Tom aan t Goor

Tom aan t Goor

29/06/2013 13:54:38
Quote Anchor link
Zo groot is mijn HTML niet :p

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


En hier mijn volledige CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
 
Robert Wazzaa

Robert Wazzaa

29/06/2013 13:57:49
Quote Anchor link
Hey tom, het is best logisch haha, je moet je header even een hoogte geven
nu is je header 0px hoog dus zie je niks ;)
 
Tom aan t Goor

Tom aan t Goor

29/06/2013 14:01:37
Quote Anchor link
O, wat stom van me, heb hem dus blijkbaar per ongeluk verwijderd :|

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?
 
Robert Wazzaa

Robert Wazzaa

29/06/2013 14:02:44
Quote Anchor link
Ja, ik zou die schaduw weghalen uit de afbeelding en met CSS neerzetten.
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.
 
Tom aan t Goor

Tom aan t Goor

29/06/2013 14:45:11
Quote Anchor link
Sorry voor de late reactie.
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?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.