[CSS] Hoe background image alleen horizontaal schalen?

[Mon0lith]

Hallo allen!

Ik ben bezig met een website en wil voor de background van deze een afbeelding gebruiken.
(een langwerpige witte banner met een schaduwtje).

Nu heb ik ingesteld dat deze zich moet aanpassen aan de schermresolutie van de gebruiker,
maar deze past zich nu horizontaal en verticaal aan terwijl ik alleen wil dat de witte banner in de breedte zich aanpast.

Kan je dit aanpassen dat je hem zeg maar een vaste positie geeft voor de hoogte maar dat ie zich wel aanpast in de breedte??

Dit is m'n huidige code

html{
height:100%;
background: #E7E7E7 url(../images/banner_wide.png) no-repeat fixed center;
}

Iemand een idee?

[Wiethoofd]

background-repeat: repeat-x?

[Fish]

ik gok zoiets als width:100%; oid

http://www.impressivewebs.com/width-100-percent-css/

[ Voor 45% gewijzigd door Fish op 26-01-2012 22:18 ]

[OkkE]

Met een simpele background-repeat moet dat inderdaad te doen zijn. Wanneer je wil dat de image uitrekt ipv herhaalt kun je (voor nieuwe browsers) ook background-size gebruiken.

[Mon0lith]

Maar als ik een background-repeat doe dan krijg ik waarschijnlijk een scrolbalk in de lengte, toch??
En dan wil ik graag voorkomen

[hiekikowan]

Je zal geen scrollbalk krijgen, de achtergrond is nooit groter als je scherm, behalve wanneer je inhoud ook groter is.

[Mon0lith]

Oke top! Ik ga het vanavond even uit proberen!
Ik zal laten weten of het gelukt is

[OkkE]

Een background-image zorgt nooit voor een scrollbar... een klein beetje zelf proberen mag wel hoor.

[P.O. Box]

Mon0lith schreef op vrijdag 27 januari 2012 @ 09:14:
Maar als ik een background-repeat doe dan krijg ik waarschijnlijk een scrolbalk in de lengte, toch??
En dan wil ik graag voorkomen

als dat zo zou zijn dan zou je een oneindig lange scrollbalk krjigen...
en die zou je browser waarschijnlijk pas weergeven wanneer hij klaar is met renderen...
en dat duurt oneindig lang...
dus eigenlijk krijg je nooit een scrollbalk te zien dan...
helaas je pagina dan ook niet

[Mon0lith]

_{background-repeat: repeat-x;}
Werkt inderdaad
Maar nu staat die banner helemaal boven in terwijl ik die op een vaste positie wil hebben
op m'n pagina (bijv. bottom 120px).

Dit kan je niet oplossen door te zeggen
_{background-position: center;}
want als je je browserdan verkleind schaalt de banner ook weer mee

Kan je een marge qua pixels aan die background geven zodat ik qua hoogte altijd op dezelfde plek blijft staan?

[ Voor 5% gewijzigd door Mon0lith op 27-01-2012 17:15 ]

[MoietyMe]

Dan moet je je banner losmaken van je background. Dus een aparte image.

[Mon0lith]

Oke een aparte div! Kan ik deze dan ook weer zo instellen dat er horizontaal geen scrollbar komt en dat ie zich altijd aanpast aan het schermformaat?

[Wiethoofd]

Je kunt in de background-position een x en y waarde neerzetten, deze doet ie nu schijnbaar naar top en center, maar je kunt hem ook op center 90% zetten, dan staat ie 10% van je bottom.

[Mon0lith]

Wiethoofd schreef op vrijdag 27 januari 2012 @ 17:23:
Je kunt in de background-position een x en y waarde neerzetten, deze doet ie nu schijnbaar naar top en center, maar je kunt hem ook op center 90% zetten, dan staat ie 10% van je bottom.

Opzich een goede oplossing maar, ik wil niet dat als ik m'n browser verklein m'n background banner omhoog springt. Dus liever een vaste positie.

[Wiethoofd]

Als je die achtergrond op je body of wrapper div zet zal deze gewoon helemaal onderop de content blijven en pas zichtbaar zijn na scrollen (bij lange pagina's). Als je een losse div doet en absolute positioneert komt de banner mee omhoog als je je venster verkleind.

[Mon0lith]

Maar m'n banner is een .png die 3000px breed is.
Ik houd dan een horizontale scrollbar.

Of moet ik de banner verkleinen naar het formaat van m'n page-wrap en daarna een repeat geven?

[Wiethoofd]

HTML:

<div style="background: url(plaatje.png) repeat-x center;
            width: 100%; height: 50px;
            position: absolute; bottom: 120px; left: 0;"></div>

Zonder relevante html/css/afbeelding of testcase kunnen we wel allerlei oplossingen aandragen, maar zullen we altijd langs elkaar heen blijven praten....

Een 3k px plaatje is ook nodeloos groot als je het mij zou vragen, maar het heeft vast een doel.

[ Voor 4% gewijzigd door Wiethoofd op 27-01-2012 18:51 . Reden: style voorzien van enters ]

[RobIII]

Mon0lith schreef op donderdag 26 januari 2012 @ 22:13:
html{
height:100%;
background: #E7E7E7 url(../images/banner_wide.png) no-repeat fixed center;
}

Wil je voortaan a.u.b. gewoon code tags gebruiken? Thaaaanks

[Mon0lith]

RobIII schreef op vrijdag 27 januari 2012 @ 18:53:
[...]

Wil je voortaan a.u.b. gewoon code tags gebruiken? Thaaaanks

Ooh sorry daarvoor! Zal voortaan de tags gebruiken

Wiethoofd schreef op vrijdag 27 januari 2012 @ 18:49:

HTML:

<div style="background: url(plaatje.png) repeat-x center;
            width: 100%; height: 50px;
            position: absolute; bottom: 120px; left: 0;"></div>

Zonder relevante html/css/afbeelding of testcase kunnen we wel allerlei oplossingen aandragen, maar zullen we altijd langs elkaar heen blijven praten....

Een 3k px plaatje is ook nodeloos groot als je het mij zou vragen, maar het heeft vast een doel.

Bedankt voor de code! Heb deze gebruikt maar het probleem hiermee blijft hetzelfde.
Op full screen bij mij (1920x1200) staat de banner prima op z'n plek maar als ik m'n browser verklein krijg ik dit:



De banner heeft het formaat van 990x562px.
Qua html code kan ik niks bijzonders vinden, want de rest staat wel gewoon goed

[RobIII]

Als je nou eens begint met een testcase online te zetten (dus énkel relevante code om je probleem te demonstreren, geen complete site met alles-erop-en-eraan). Zo'n testcase kun je ook maken op http://jsfiddle.net/ en ons daar naar toe te verwijzen.
Anders blijven we maar raden...

[P.O. Box]

maak de onderste 120 pixels van je achtergrond gewoon transparent en doe background-position: bottom....

[harrald]

Of een test case op http://dabblet.com/ (jsfiddle maar dan voor css )

[BtM909]

Ik heb je titel even wat duidelijker gemaakt. Wil je daar volgende keer aan denken? Dank u