CSS voor achtergrond image

[Jive1]

Hey!

Wanneer men een achtergrondimage aanmaakt voor een website, maakt men dat meestal aangepâst aan de resolutie waarmee de website opgezet wordt.

Echter, bij bezoekers met verschillende monitoren, zijn er wel bij die niet diezelfde resolutie gebruiken, maar een andere, waardoor dat achtergrondimage soms maar gedeeltelijk te zien is, soms echter een "lege" rand als opvulling heeft, of erger nog, het image wordt herhaald en dus ziet men rechts of onder een stuk van het image opnieuw verschijnen.

Soms wordt het achtergrondimage ofwel met veranderde hoogte/breedte-verhoudingen weergegeven, ofwel valt er bovenaan/onderaan een stuk van dat achtergrondimage weg.

Een en ander brengt mee dat men niet voor elke bezoeker nauwkeurig kan werken bij het opbouwen van de website.

In normale gevallen kan men een image aanpassen zonder al te veel vervorming te bekomen door heigth en width naar 100% te brengen, maar dan heeft men toch wel kleine hoogte/breedte-vervormingen.

Kan men via CSS het achtergrondimage zo instellen dat het "steeds" volledig wordt weergegeven?

Greetz

Jive1

[stegisoft]

In css weet ik niet maar dit heb ik wel gedaan:

<SCRIPT type="text/javascript">

<!--

if (screen.width==800||screen.height==600) //if 800x600

window.location.replace("index2.php")

else if (screen.width>1024||screen.height>768) //if >1024x768

window.location.replace("index3.php")

else //if all else

window.location.replace("index1.php")

//-->

</script>

[Jive1]

Hey!

Bedankt voor de tip.

Ik had voor mezelf ook al ongeveer zoiets bedacht, maar sinds ik met CSS heb leren werken vond ik dat idee niet zo elegant meer.

Als het met CSS zou kunnen, dan zou ik de voorkeur daaraan geven! Maar hiermee ben ik er nog niet in gelukt...

Greetz

Jive1

[leroy]

Beste,

Wat voor een achtergrondimage is het? Ik zit al een lange tijd in de webdevelopment, en ik raad het ten zeer strengste af om foto's te gebruiken als achtergrond.

Als je dit wel wilt doen kan dat. Maar dan moet je de foto verkleinen naar dat hij bijvoorbeeld 600px hoog is. (oude schermen ondersteunen dit ook nog steeds). En dan deze in je achtergrond zetten. In je CSS zet je op de achtergrond de volgende code:

background-repeat:no-repeat;

Wil je dat hij alleen van links naar rechts (x-as) herhaalt op 1 regel zet er dan:

background-repeat:repeat-x;

wil je dat hij van boven naar beneden op 1 lijn (y-as) herhaalt zet er dan:

background-repeat:repeat-y;

De afbeelding wordt dan op de manier zoals jij hebt ingesteld herhaalt of niet.

Wil je een afbeelding op de achtergrond van jouw pagina. Maak dan je pagina niet de volledige breedte van je scherm, maar stel deze in op 800px (dit is smal maar wordt door elke monitor geaccepteerd).

Tegenwoordig hebben we allemaal minimaal een resolutie van 1024x768. Dus kun je de breedte ook zetten op bijvoorbeeld 1000px. Je kan als breedte ook een percentage gebruiken, maar dat rekt je foto weer uit wanneer je naar een groter scherm gaat.

Ik gebruik tegenwoordig als achtergrond afbeeldingen een afbeelding die zich continu kan herhalen: (voorbeeld)

Of ik gebruik gewoon 1 kleur als achtergrond (voorbeeld)

Soms is het ook wel mooi om een gedeelte van 60px te gebruiken aan de bovenkant en de onderkant gewoon doorlopend 1 kleur (voorbeeld)

Misschien dat je hier iets aan hebt.

Groeten,

Leroy

[Jive1]

Hey! Leroy,

Bedankt voor je reaktie en goede raad!

Het is de bedoeling een nieuwe eigen website te maken, waarin ik wat over mezelf vertel en mijn bezigheden. Momenteel staat een voorlopig begin op Index .Dit is experimenteel, wat je op de index-page ziet staan zou ik graag zo houden, maar op de volgende page staat nog niet veel op en is nog maar in ontwerp.

Eigenlijk ben ik ook nog aan't leren werken met CSS sheet, en ook dat is dus allemaal nog experimenteel.

De foto echter die op index staat heb ik zo gekadreerd zoals ik het wil hebben, en het klopt dan ook vrij goed op een scherm van 1025x768 resolutie. Maar wanneer ik naar een ander scherm ermee ga, dan past het niet meer.

De oplossing ware natuurlijk zoals jij het aanraadt, het beeld wat kleiner maken en centreren voor iedere toegepaste resolutie. Maar ik vroeg me af of er een middel bestaat om toch de foto zo te plaatsen dat hij steeds juist het scherm vult, waarbij de hoogte belangrijk is, de breedte is minder belangrijk, want daar mag eventueel zowel links als rechts een stukje afvallen, maar aan de boven- en de onderkant mag echt niets afvallen ... Het probleem met deze foto is dan wel de 'ronde' zon, maar ik dacht dat, als er vervorming optreedt, dat ik het bij zo een bol ook het best zelf kan waarnemen, en als ik merk dat het té erg zou worden, dan moet ik maar gaan voor een ander beeld.

De foto is 1031x619px, wat eigenlijk voor een doorsnee bezoeker ( er is ook steeds boven- en onderaan de browser een door het beeld niet ingenomen ruimte, zodat het werkelijk gebruikte deel van het scherm niet klopt met de verhoudingen van de standaard resolutie, vandaar dat mijn foto daarmee reeds rekenijng houdt, dat probeer ik toch... ) in de meeste gevallen wel moet kloppen ( standaard is toch nog altijd 1024x768 resolutie hé!

Zo, dat is wat me nu bezighoudt...

Greetz

Jive1

[leroy]

Het is niet mogelijk om een foto zo in te stellen dat hij op elke resolutie de achtergrond vult. CSS en HTML zijn statisch. Statisch is dat het vast staat op de manier hoe jij het hebt geïmporteerd.

De enige manier om zoiets te doen is via javascript. Dat je zelf resoluties zelf gaat maken, maar dat is zeer on-professioneel.

Als ik ongeveer zo'n site wil maken zoals jij die nu maakt, hak ik de foto in stukjes. De zon apart, de jet apart, enz.

Deze zet ik op de plek waar ik ze zou willen hebben, en de zon zou ik dan veel te groot maken als wat hij werkelijk moet zijn, en de hoogte 100% van de browser geven. Dat is eigenlijk de enige manier hoe je het zou kunnen doen. MAAR!. dit verlaagt de snelheid van je browser omdat hij een veel te grote foto in moet laden. En het staat niet professioneel.

Een achtergrond gebruiken dat een foto is, is nooit heel erg professioneel. De website zou in een soort kader moeten staan, zoals ook die voorbeelden die ik gaf. Het is anders gewoon niet mogelijk om zoiets tot stand te brengen.

Groeten,

Leroy