achtergrond automatisch aanpassen

Status
Niet open voor verdere reacties.
F

FakeMessiah

Gebruiker
Lid geworden
19 okt 2009
Berichten
23
ik zit hier met een klein probleem,
weet er iemand (html of css) een code voor het automatisch aanpassen
van de achtergrond afbeelding in grootte?

dus ik heb een afbeelding van 1280*720 en deze zou moeten aanpassen aan een kleiner of groter scherm.



greets
 
Laatst bewerkt:
Nou, als het geen afbeelding is die niets met de layout van je pagina te maken heeft, is dat vaak niet zo eenvoudig.
Bv. als er in de achtergrondafbeelding een wit vierkantje zit, waarboven in de html wat tekst moet koen, kan het heel lastig of zelfs onmogelijk zijn. Soms kan het met meeschalen van de hele afbeelding, soms moet de afbeelding opengeknipt worden en er een flexibel tussenstuk in komen, enz. enz.
In het algemeen valt er dus weinig zinnigs over te zeggen: het hangt helemaal van de pagina('s) af, in welke richting de oplossing gezocht moet worden.
Heb je een link van de pagina/site die je bedoelt?

Met vriendelijke groet,
CSShunter
 
hmmm, ok.

er moet geen tekst komen op een bepaalde plek van de achtergrond. De achtergrond wordt gewoon gebruikt als achtergrond :)

kdacht om dit te gebruiken, maar het helpt niet echt zo goed :p

body{
background-image: url(MainFrameGraveren.png);
background-size: 100%;
background-attachment:fixed;
}
 
Aha. "background-size" zou mooi zijn, maar dat is een eigenschap die wel in css3 komt te zitten (die is nog niet van kracht als officiële richtlijn), maar die nog niet in css2.1 zit en door de meeste browsers niet ondersteund zal worden. Het rechtstreeks schalen van een achtergrondfiguur kan dus niet.
Wat je misschien zou kunnen doen, is:
Code: 
#achtergrond {
	position: absolute;
	width: 100%;
	top: 0;
	z-index: -1;
	border: 0;
	}
#achtergrond img {
	width: 100%;
	}
en dan meteen na de <body> invoegen:
HTML: 
<body>
<img id="achtergrond" src="MainFrameGraveren.png" alt="">
... rest van de html
Nu is de achtergrond als "voorgrond-img" opgenomen, en kan deze wel meeschalen met de venstergrootte of de resolutie, maar zit in een laagje onder de rest van de pagina.
Een valkuil is:
  • Bij een kleine resolutie of smal ingesteld scherm wordt de hoogte van de achtergrondafbeelding ook kleiner, en kan er (zeker bij een pagina met veel content) een leeg vlak onder de afbeelding ontstaan.
Succes!
CSShunter

PS: Als "MainFrameGraveren.png" betekent dat je met frames werkt, en de achtergrond passend in het frame moet komen, kan het heel anders komen te liggen! Het hangt er helemaal van af, ... enz. ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan