Background image op vaste locatie

Status
Niet open voor verdere reacties.
L

lerrie

Gebruiker
Lid geworden
2 nov 2010
Berichten
300
Op een website wil ik graag een diagonale streep als achtergrond van de pagina. Deze is geplaatst in een 100% width div maar zo naar binnen geplaatst zodat hij een stuk uit de rechterbovenhoek begint. Nu heb ik het probleem dat hoe groter de div is waarin de background image staat hoe verder deze naar rechts komt te staan. Om een voorbeeld te geven heb ik 2 test site gemaakt, met op test1 de juiste begin positie en op test2 de foutieve positie n.a.v. de grotere lengte van de div. http://www.projectarthouse.nl/test/test1.php http://www.projectarthouse.nl/test/test2.php

De css van de pagina:
Code: 
@charset "utf-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #000;
}
#container {
	margin-right: auto;
	margin-left: auto;
	height: auto;
	width: 100%;
	background-image: url(images/background/middenbg.jpg);
	background-repeat: repeat;
}
#outmidden {
	background-image: url(/test/streep.png);
	background-repeat: no-repeat;
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	float: left;
	background-position: 50%;
	position: static;
	background-color: #666;
}
#midden {
	width: 1020px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 65px;
	height: auto;
	clear: both;
}
#outfooter {
	background-color: #000;
	float: left;
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
#footer {
	height: 275px;
	width: 1020px;
	margin-right: auto;
	margin-left: auto;
}

Wie kan mij helpen ervoor te zorgen dat de afbeelding altijd op dezelfde positie staat ongeachte de lengte van de div.
 
Lerrie,

Ik denk dat als je de background-position: 50% en position: static op de container outmidden weg haalt het probleem is opgelost. Daar komt bij dat m.i. de background-position geen static als property kent.
 
Mister quick,

De position is ook voor de div zelf en niet de background. Als ik de -50% verwijder dan krijg ik niet het gewenste resultaat. Iemand anders een idee?
 
Hoi lerrie,
Ik begrijp: de rechterbovenpunt van de streep moet altijd op hetzelfde punt komen te staan.
Maar wat moet er linksonder gebeuren?
  1. Mag de streep dan gaan doorlopen (met dezelfde schuinte) tot helemaal aan de linkerkant van het middengedeelte (en daaronder niks, als de pagina nog hoger wordt; of eventueel: daaronder opnieuw vanaf rechts beginnen)?
  2. Of moet het een echte diagonaal worden, zodat de streep bij een hogere pagina meer rechtop komt te staan, en de linksonderhoek óók altijd op hetzelfde punt van de zijkant zit?

Met vriendelijke groet,
CSShunter
 
Hey Csshunter,

Het klopt precies wat jij zegt, met optie 1. De afbeelding (streep) ga ik nog iets langer maken en zal doorlopen tot helemaal aan de linkerkant van het middengedeelte. De afbeelding zal lang genoeg worden zodat hij niet opnieuw van rechts hoeft te beginnen.
 
Hoi lerrie,
Juistem. - Het makkelijkste lijkt me dan om de background-streep aan de rechterkant zoveel extra grootte te geven als er ruimte vanaf de rechterkant bovenaan nodig is.
Vervolgens kan het bg-img er in gezet worden met een positionering aan de rechterkant: 100% 0;
De footer kan er gewoon overheen geplakt worden.

In de eenvoudigste vorm (ik weet niet wat je allemaal met die 100% brede links-floatende containers van plan bent ;) ):
HTML: 
<body>
   <div id="content">
      [content]
   </div>
   <div id="footer">
      [footer]
   </div>
</body>
</html>
Met als css:
Code: 
body {
	width: 990px; /* past dan nog op 1024*768 scherm */
	margin: 65px auto 0 auto;
	background: #666666 url(images/lerrie-streep-nw.png) no-repeat 100% 0;
	}
#footer {
	background: #666666;
	}


Met vriendelijke groet,
CSShunter
 
Csshunter,

Bedankt voor je hulp. Ik denk dat ik al iets anders heb gevonden. Ik hoef de streep niet meer helemaal door te laten lopen tot links onder in de pagina maar hij mag van mij ook gewoon doorlopen tot helemaal links van de content div zoals jij in de voorbeelden heb gedaan. Anders wordt het allemaal wel een beetje erg lastig.
 
Aha, ik dacht dat je met "pagina-breedte" de content-breedte bedoelde, en niet het canvas.
Maar het kan eventueel wel, met een extra <div> die slinks absoluut gepositioneerd is en voldoende breed is voor hoge resoluties (dwz ook uitbreiding van het streep-img naar de linkerkant).
HTML: 
<body>
   <div id="streepcontainer"></div>
   <div id="content">
      [content]
   </div>
   <div id="footer">
      [footer]
   </div>
</body>


[edit]Je hebt dan bij korte pagina's wel wat overschot-ruimte onderaan. Dat zou met wat javascript wel weg te halen zijn, denk ik.[/edit]

Gegroet,
CSShunter
 
Laatst bewerkt:
Inderdaad zo bedoel ik het! Alleen is het de bedoeling dat de streep stopt bij de footer. dus hier niet over heen gaat.
 
Haha ik denk het wel. Zou je een eens kunnen proberen de streep vanaf het begin (top/bovenkant) van de content te kunnen laten beginnen en niet te laten doorlopen na de footer. Dus stoppen bij de footer.
 
Hoi lerrie,
We gaan het halen voor de z! :d



Toelichting
Deze is gelijk aan de eerste serie a-b-c, maar dan met bovenop een absoluut gepositioneerd strookje van 65px hoog, waarin de streep gerecycled wordt.
Hoogte- en resolutie-bestendig. :)

Met vriendelijke groet,
CSShunter
 
Hola! :eek:
Nu zie ik dat je zei: "vanaf het begin (top/bovenkant) van de content laten beginnen".
Maar de [content] begint pas onder het 65px hoge bovenstrookje zwart, en dan is het toch de serie a-b-c die we al gehad hebben? :shocked:
  • Of bedoel je dat de content meteen bovenaan moet beginnen? Dan laat je eenvoudig de margin-top van 65px van de <body> uit a-b-c weg.

Anders mag je even een tekeningetje posten van hoe je het dan wel gehad had willen hebben. ;)
 
Laatst bewerkt:
Ik heb op de test pagina expres een marge van 65px op de top gegeven. Hier komt op de daadwerkelijke website namelijk nog content boven. Zoals je zelf al aangeeft het gaat dus VANAF de top van de content (zoals bij a, b en c) alleen de bedoeling is dat de streep de baan helemaal afmaakt en niet stopt bij de breedte van de content. Daarom heb ik de streep in de div "outdiv" geplaatst met een 100% width. Hij moet dus doorlopen zoals hij hier doet http://bliksekaters.nl/tests/schuine-streep-g.htm maar dan stoppen bij de onder aan de div content zoals hier gebeurd http://bliksekaters.nl/tests/schuine-streep-b.htm alleen zou de streep dus nog een klein stukje links onderin door moeten lopen. Laat me weten als je het niet volgt.
 
Mmm, nou begin ik 'm toch weer te knijpen met het alfabet. :rolleyes:



Toelichting:
De streep is nu absoluut binnen het content-gedeelte geplaatst (met een forse uitwijk naar links voor de bredere schermen), zodat de streep niet onder de content uit kan komen; en dan met een contentwrapper erbij om de echte content in een laag boven die van de streep te krijgen.

=======
Laat me weten als je het niet volgt.
Klik om te vergroten...
Eén img zegt meer dan 1000 woorden...
Als dit 'm ook niet is, zal je toch echt met een plaatje op de proppen moeten komen! :p

Met vriendelijke groet,
CSShunter
 
Precies zoals ik wou! Ik ga het proberen! Ik hou je op de hoogte.
 
Definitieve versie!

Hoi Lerrie,
Herstel! Nu ik goed voor me zie wat het moet worden, kan het ook nog eenvoudiger. :d

De #contentwrapper kan gemist worden! Om de streep-div niet als laag boven de content te krijgen, is die wrapper niet nodig als je de streep-div een {right: 990px} geeft t.o.v. de #content van 990px breed. Dan staat ie er altijd naast. De rest is een kwestie van mikken.
HTML: 
<div id="content">
    <div id="streep"></div>
    ....
    rest van de content
</div>
Zoals ik zei, het loont altijd de moeite om even een tekeningetje te maken: een A4'tje uit je printer roven en een schetsje maken. Vaak rolt er meteen uit hoe het moet.

lerrie-streep-schets.png

Als ik het juist heb, zitten de breedbeeldschermen op het moment op 1920px in de breedte. Maar ik heb een max. schermbreedte van 3000px aangehouden, dan is het model nog even toekomstbestendig.
Bij de gegeven schuinte van de streep blijkt er dan een image van ca. 1120*1000px nodig te zijn. Als de afbeelding transparant is waar de streep niet zit, kan deze zowel voor de #streep als voor de #content gebruikt worden. Voor de #content-breedte is de afbeelding nl. groot genoeg.

Omdat alles een vaste breedte cq. vaste positie t.o.v. elkaar heeft, is ook een transparante rechterkant-strook niet meer nodig (om 'm voor de #content als background-img 100% vanaf rechts te kunnen laten beginnen).

In de #content wordt het simpelweg:
Code: 
#content {
	background: #D9D5CF url(images/lerrie-streep-transparant.png) no-repeat -385px 0;
	position: relative;
	}
Nu de container van de streep erbuiten. De #streep wordt weer absoluut gepositioneerd t.o.v. de content, dan blijft het overschot t.o.v. de schermbreedte buiten beeld.
  • De #streep kan zijn eigen breedte krijgen, hier: {width: 1123px;}.
  • Door de absolute positie t.o.v. de #content kan de #streep er nooit onderuit komen: {bottom: 0;}.
  • De top-hoogte zit altijd op een vaste afstand onder de start van de #content, hier: {top: 550px;}.
  • De rechterkant laten we nu dus beginnen waar de linkerkant van de #content begint: {right: 990px;} = all-in breedte van de #content.
  • Tenslotte moet het background-img nog een klein stukje naar rechts opgeschoven worden om het onnodige rechterbovenhoekje kwijt te raken: {background-position: 126px 0;}; makkelijk vast te stellen via even rangeren met Firebug.
Samen wordt het hiermee:
Code: 
#streep {
	position: absolute;
	width: 1123px;
	top: 550px;
	bottom: 0;
	right: 990px;
	background: url(images/lerrie-streep-transparant.png) no-repeat 126px 0;
	}
Zo kom ik dan op m'n:



Conclusies:
  1. CSS is overal goed voor. :love:
  2. Altijd tekeningetje maken! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Super bedankt voor de gedetailleerde uitleg. Heb ik erg veel aan! Ik snap precies waar je naar toe wil werken. Ik heb even geprobeerd het bovenstaande toe te passen op mijn site maar het lukt niet helemaal. Mijn echte website is, net zoals de testsites, opgebouwd uit verschillende lagen van divs:

<div id="outheader">
<div id="header"></div>
</div>

<div id="outmidden">
<div id="midden"></div>
</div>

<div id="outfooter">
<div id="footer"></div>
</div>

De outdivs hebben een width van 100% om zo de verschillende achtergronden van de lagen goed uit te laten komen. Nu heb ik bij de eerste test sites in deze post de streep als achtergrond van de outmidden div. Hoe kan ik jouw voorbeeld in deze opzet terug laten komen?
 
Ik zou zo zeggen:
HTML: 
<div id="outmidden">
    <div id="streep"></div>
    <div id="midden"></div>
</div>
En dan de #outmidden niet die 100% breedte e.d. geven, maar de opmaak die bij mij in de #content staat.
In de #midden div kan je dan gewoon alle troepjes van de inhoud kwijt (zoals margins, paddings, kolommetjes, enz.).

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan