Archief - Banner paginabreedte met overlay?

Hallo iedereen,

Ik zit al een hele tijd met een vraag, maar heb na wat zoeken nog steeds geen manier gevonden om het op te lossen.

Graag zou ik willen dat er een banner, eerder een achtergrond, even breed zou zijn als mijn pagina. Ook al sleep ik deze pagina tot 2000 pixels breed.

Ik heb een website gevonden die exact doet waar ik naar aan het zoeken ben, namelijk Industral Coatings - Thermal - Waterproof - Corrosion - Fire Protection

Als je hierbij het kader groter maakt dan gaat de achtergrond ook wat mee.

Werken ze hier dan met een brede achtergrond van bijvoorbeeld 3000 pixels, met links te beginnen die verschillende kleurtjes (kleuren staan net onder het blauw van de achterrgond) en laten ze dan de voorgrond erover centreren? Indien ja, hoe kan ik er dan voor zorgen via HTML of CSS dat ik dit identiek, of toch op de best mogelijke manier zou kunnen doen.

Dat de overgang plaats zal vinden in het gedeelte dat niet beweegt en het "lijkt op" bewegende gedeelte is duidelijk voor mij.

Hopelijk kunnen jullie aan mijn vraag uit en kan iemand me helpen.

Alvast bedankt!

De afbeelding met de kleuren is een afbeelding van 2000px breed en 10px hoog. Da's een div op zich. De blauwe balk daarboven heeft als achtergrond een vrij kleine afbeelding (56x206) die gewoon herhaald wordt.

Beste manier om zoiets te doen is gewoon een div maken met width: 100% en daarbij een achtergrond afbeelding die je even hoog maakt als je div en die je gewoon met de volgende css line "background-repeat: repeat-x" herhaalt op de X-as.

Alles wat er in die blauwe balk gebeurd is gebeurd vind ik eigenlijk niet zo super, aangezien het niet echt responsive is. Niet zo moeilijk om te maken.

btw, als je Chrome hebt, druk F12 en je kan de elementen inspecteren, op firefox heb je een leuke addon: Firebug die je in staat stelt om html en css van websites grondig te bestuderen.

google eens op liquid background , fixed width

google 1:
Boilerplate Code For Hybrid CSS Layouts

de rest lukt zelf wel

Scissor zei:

De afbeelding met de kleuren is een afbeelding van 2000px breed en 10px hoog. Da's een div op zich. De blauwe balk daarboven heeft als achtergrond een vrij kleine afbeelding (56x206) die gewoon herhaald wordt.

Beste manier om zoiets te doen is gewoon een div maken met width: 100% en daarbij een achtergrond afbeelding die je even hoog maakt als je div en die je gewoon met de volgende css line "background-repeat: repeat-x" herhaalt op de X-as.

Alles wat er in die blauwe balk gebeurd is gebeurd vind ik eigenlijk niet zo super, aangezien het niet echt responsive is. Niet zo moeilijk om te maken.

btw, als je Chrome hebt, druk F12 en je kan de elementen inspecteren, op firefox heb je een leuke addon: Firebug die je in staat stelt om html en css van websites grondig te bestuderen.

Klik om te vergroten...

Ik ben dan ook eerder een beginner, maar dit klinkt me al veel duidelijker.
Samen met Woony zijn tutorial gaan we wat smodderen

Thanks!