Achtergrond op elk formaat monitor gevuld

Status
Niet open voor verdere reacties.
F

Flinth

Gebruiker
Lid geworden
28 jul 2011
Berichten
8
Ik ben een site aan het maken en nu heb ik achtergronden gemaakt.
Nu wil ik deze voor elke monitor gelijk hebben.
Wanneer ik een kleinere monitor heb is hij te groot en wanneer ik een 20" monitor heb is hij goed. Mijn laptop geeft hem niet goed aan. Ik wil alles ook fixed neer zetten zodat er geen scroll balk in beeld is. Alleen in een kader moet hij te zien zijn.

Ik ben nu al een aantal dagen bezig maar ik kom er niet uit.
Ik heb vandaag een page gemaakt waar alles in komt te staan van 990px breedt.
Daarachter moet dan de background lopen. Deze is nu 2000x1200 px. Ik denk dat ik deze naar 1024x768 moet maken en dan kijken hoe ik hem volledig in beeld krijg voor elke monitor..

Heeft iemand een suggestie?

Alvast bedankt voor je antwoord.
 
Deze code css en html maakt elke afbeelding 100% bij 100% op welke monitor grootte dank ook.
tevens kunt je bij id contents er tekst overheen laten lopen
HTML: 
<html>
    <head>
<style type="text/css">

body {margin:0px; color:#fff; font-weight:bold;}

#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;

}

#contents { font-size:70%; padding-top:5%; padding-left:10%; padding-right:5%; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:200%;

z-index: 1; 

position: absolute;

}

</style>

</head>

<body> 


<!-- this creates the background image -->

<div id="bg_image"> 

<img src="background.jpg" style="width: 100%; height: 100%;"> 

</div>



<!-- this puts the contents of the page ontop of the background image -->

<div id="contents">


  <h1>Welkom  bij</h1>


</div> 


</body>
</html>
 
Laatst bewerkt:
Mijn achtergrond in nu 2000x1200 px groot. Aan de linkerkant staat een foto
background-site-alle-resoluties-2
(weet niet of hij dit pikt.)
Wanneer ik dit ga plaatsen komt hij op mijn laptop er uitgerekt op te staan.
Ik weet zo ook niet hoe ik dit op kan lossen. Ik kan een losse foto plaatsen aan de rechterkant van de pagina en dan in percentages werken, bv 20% voor de foto en 80% voor de rest van de pagina.
Eigenlijk moet hij alles wat er op de pagina staat schalen naar 100% maar dat doet hij niet. Ik wil eigenlijk nergens hoeven te scrollen.
 
dus je wilt zeg maar een 2 colum layout van 20% en 80 % ?
stuur maar wat je hebt dan zet ik wel iets in elkaar
 
hallo,

kijk hier eens naar: http://www.wolvetang.com.
het achtergrond plaatje heb ik dus niet in een container gezet maar in de body tag geplaatst.
Dit is mijn body css:

Code: 
body {				
	font-family: sans-serif;
	font-size: 9pt;
	color: #ffffff;
	background-image: url(http://www.wolvetang.com/artwork/global_background_1.jpg);
	background-repeat: no-repeat;
	background-color: #000000;	
	background-attachment: fixed;
	margin: 0px 0px; 
	padding: 0px;

Kijk maar noe dat voor je werkt.

groet
 
word de afbeelding niet wit als er bv te veel tekst is en er moet gescrolled worden hoe kan je er dan voor zorgen dat het niet wit word en toch je volledige achtergrond image?

mvg

sam
 
Hoi Sam,

Daar zorgt het css attribuut

Code: 
background-attachment: fixed;

voor.

Ik heb er in ieder geval geen probleem mee.
Mocht je er nit uit komen dan hoor ik het wel.
grt,
 
dat zou moeten werken. als je me mij het adres van de site geeft kan ik beter naar de complete code kijken. Anders weet ik niet waar het probleem verder zou kunnen liggen.
 
ja ... maar dan kan ik inderdaad helemaal niet kijken ... :P

Dan ben ik bang dat ik verder niet weet hoe en waar die
+-5cm zwart aan de rechtse kant
Klik om te vergroten...
vandaan komen ....
:(
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan