Volledige afbeelding als website

Pagina: 1
Acties:
  • 126 views sinds 30-01-2008
  • Reageer

  • pderaaij
  • Registratie: Oktober 2005
  • Laatst online: 18-08 20:16
Misschien een vrij simpele vraag, maar ik kan het antwoord hier op niet echt vinden.

Voor een website wil ik graag een foto als achtergrond van de site gebruiken. Nu is dit makkelijk te maken voor één bepaalde resolutie, maar hoe maak ik dit zo dat het op alle resoluties er goed uitziet en niet dat op een hogere resolutie de afbeeldingen herhaald wordt of een bepaalde achtergrond kleur krijgt.

Ik hoop dat het duidelijk is wat ik zou willen? Anders hoor ik het wel.

  • CodeCaster
  • Registratie: Juni 2003
  • Niet online

CodeCaster

Can I get uhm...

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...


  • Blue_Fear
  • Registratie: Augustus 2004
  • Laatst online: 22-09-2024
Even een table maken en dan in de middelste <TD> de afbeelding zetten en de width op 1024 (of 1200)

Verwijderd

Cascading Stylesheet:
1
2
3
body {
background-repeat: no-repeat;
}

  • pderaaij
  • Registratie: Oktober 2005
  • Laatst online: 18-08 20:16
Ik bedoel meer als deze site:

www.nedap.nl

Deze ziet er op resoluties hoger dan 1024*768 altijd goed uit. Ik heb zelf 1280*1024 en dat ziet er ook goed uit. Nu ben ik benieuwd of hier nog een speciale techniek achter zit.

  • GH45T
  • Registratie: November 2003
  • Laatst online: 12:35
Probeer dit eens:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"titel"<title>
<meta http-equiv="content-Type" content="text/html"; charset="iso-8859-1">
<meta http-equiv="cache-control" content="no-cache"><style type="text/css">
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
#backgr {
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    margin : 0px 0px 0px 0px;
    padding : 0px 0px 0px 0px;
}
#content {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    margin : auto;
    padding : auto;
}
</style>
</head>
<body>
<div id="backgr">
<img src="images/background.jpg" width="100%" height="100%" alt="background">
</div>
<div id="content">"inhoud van je pagina"</div>
</body>
</html>


Edit:
Die heb ik zelf ooit op een site gebruikt. Het resizen is niet altijd even mooi, maar het werkt wel :P

[ Voor 6% gewijzigd door GH45T op 23-11-2006 13:28 ]


  • Zerora
  • Registratie: September 2003
  • Laatst online: 30-11 22:30

Zerora

Ik Henk 'm!

pderaaij schreef op donderdag 23 november 2006 @ 13:19:
Ik bedoel meer als deze site:

www.nedap.nl

Deze ziet er op resoluties hoger dan 1024*768 altijd goed uit. Ik heb zelf 1280*1024 en dat ziet er ook goed uit. Nu ben ik benieuwd of hier nog een speciale techniek achter zit.
De achtergrond op die website bestaat uit kleinere afbeeldingen die samen een foto vormen.

Dus dat betekent dat als jij zoiets wil het gewoon een kewestie is van slim slicen, knippen/plakken, indelen in photoshop oid. :)

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."


  • pderaaij
  • Registratie: Oktober 2005
  • Laatst online: 18-08 20:16
Okay, maar is het dan verstandig om van de hoogste resolutie uit te gaan en dan voor de kleinere resoluties die terug te scalen?

Of gewoon wat er buiten valt, valt er buiten en dat zul je dan ook niet zien?

  • Zerora
  • Registratie: September 2003
  • Laatst online: 30-11 22:30

Zerora

Ik Henk 'm!

Nou het is zo dat de meeste internetgebruikers vaak nog 1024*768 draaien op hun pc. Dus ik zou van die resolutie uitgaan voor je website om hem goed te laten passen.

[ Voor 5% gewijzigd door Zerora op 23-11-2006 13:30 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."


  • pderaaij
  • Registratie: Oktober 2005
  • Laatst online: 18-08 20:16
Ja, sorry dat ik vragen blijf stellen.

Maar dan moet je bij hogere resolutie of de afbeelding herhalen of een achtergrondkleur laten zien. Dat vind ik niet echt een top oplossing... Denk dat ik dan maar eerder een site voor grotere resolutie maakt en wat er af valt er af, dat gebeurt op die voorbeeld site ook volgens mij.

  • GH45T
  • Registratie: November 2003
  • Laatst online: 12:35
pderaaij schreef op donderdag 23 november 2006 @ 13:35:
Ja, sorry dat ik vragen blijf stellen.

Maar dan moet je bij hogere resolutie of de afbeelding herhalen of een achtergrondkleur laten zien. Dat vind ik niet echt een top oplossing... Denk dat ik dan maar eerder een site voor grotere resolutie maakt en wat er af valt er af, dat gebeurt op die voorbeeld site ook volgens mij.
Heb je het idee wat ik voorsteld al overwogen?

Dan wordt je achtergrond gewoon geresized. Voorbeeld kun je op de site van mijn broertje vinden op http://teeh.mine.nu/bart/

  • kromme
  • Registratie: April 2004
  • Laatst online: 01-12 16:25

kromme

Doe hubs slaag in het koffer..

Ik ben al een tijdje aan klooien met mijn webpagina.
Heb die ook van een afbeelding gemaakt en vervolgens knippen plakken in frames in pagina maar krijg die ook niet vast op 1 resolutie.afbeelding is 1024*768.

Keep it calm...en lek mig de zuk


  • Cartman!
  • Registratie: April 2000
  • Niet online
GH45T schreef op donderdag 23 november 2006 @ 13:53:
[...]

Heb je het idee wat ik voorsteld al overwogen?

Dan wordt je achtergrond gewoon geresized. Voorbeeld kun je op de site van mijn broertje vinden op http://teeh.mine.nu/bart/
En ik denk dat je met mij eens gaat zijn dat het er niet uitziet? Pixelige foto word het zo, zonde.

TS : maak een layout die op elke resolutie werkt zonder scaling en ranzige trucjes.

  • GH45T
  • Registratie: November 2003
  • Laatst online: 12:35
Cartman! schreef op donderdag 23 november 2006 @ 14:18:
[...]


En ik denk dat je met mij eens gaat zijn dat het er niet uitziet? Pixelige foto word het zo, zonde.

TS : maak een layout die op elke resolutie werkt zonder scaling en ranzige trucjes.
Komt ook omdat de kwaliteit van de echte afbeelding niet al te best is.

Het is, zoals ik al zei, niet echt mooi, maar wel een oplossing om je afbeelding beeldvullend te krijgen.

  • Zerora
  • Registratie: September 2003
  • Laatst online: 30-11 22:30

Zerora

Ik Henk 'm!

En anders:
Flash. Als je je website in flash maakt dan heb je wel mooie scaling van je site. Past in iedere browser. :)

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."


Verwijderd

Ik zou eerst de lay-out goed uitdenken, wat wil je op dat gebied dus... daarna moet je gaan kijken hoe je met het oog op verschillende schermresoluties het beste om kan gaan met plaatjes... veel sites gebruiken slimme trucjes om de waan te wekken dat achtergrondafbeeldingen doorlopen over de gehele pagina, inclusief de pagina die TS zelf showt: www.nedap.nl

Als je daar rechts kijkt zie je de achtergrond afbeelding, deze kun je ook los bekijken en zie je dat ze op een slimme manier gefaked hebben dat de achtergrond afbeelding doorloopt in de meest rechtse kolom. Duidelijk voorbeeld dat de lay-out leidend is geweest, en ze de plaatjes precies pas hebben gemaakt om de juiste artistieke uitstraling te geven!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Hou daarnaast ook ff rekening dat je eigenlijk moet designen op best layout... Als ik een resolutie heb van 1920000x1200000* pixels, dan draai ik mijn browser screen vast niet fullscreen :)


* alvast indekken voor de toekomst :P

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

Dat ligt er ook een beetje aan hoe groot je scherm is ;)
Pagina: 1