CSS: afbeelding op schermbreedte weergeven
Eigenlijk ben ik op zoek naar een klein CSS-scriptje maar ik weet niet of het wel bestaat. Ik heb op mijn site een tabel, die tabel heeft een background image. De tabel heeft width=100% maar die afbeelding heeft natuurlijk een maximum aan px. is het mogelijk om met CSS deze afbeelding in de breedte uit te rekken zodat hij het volledige scherm vult?
groetjes en alvast bedankt
Code (php)
1
2
2
<?<table background="image.bmp" width="100%" height="116" border="0" cellspacing="0">
?>
?>
Die width="100%" zit dus in die table-tag.
Code (php)
1
<img id="volledige_breedte" src="..." alt="Op deze afbeelding kunt u een voorbeeld van een pen zien.">
Code (php)
1
2
3
4
5
2
3
4
5
img#volledige_breedte
{
width: 100%;
display: block;
}
{
width: 100%;
display: block;
}
Let wel op dat deze <img> in je body staat of in een div die de hele breedte heeft, want hij pakt de breedte van de parent.
Wil je dat niet, positioneer hem dan relatief oid.
Sla overigens je plaatjes op als .png, .gif of .jpg (die laatste alleen als er geen kwaliteitsverlies is!). .png is het beste voor paint bestanden. Dan zijn ze best klein. Overigens vraag ik me af waar dit voor is, toch niet voor een lay-out he?
Misschien verstandig je afbeelding ook te linken in CSS via:
img#volledige_breedte
{
width: 100%;
display: block;
background-image:url("locatievandeafbeelding.jpg") no-repeat;
}
wat voor afbeelding wil je eigenlijk gebruiken als ik vragen mag? Gewoon uit nieuwsgierigheid.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
table#volledige_breedte
{
width: 100%;
display: block;
background-image:url("golfje.png") no-repeat;
}
</style>
</head>
<body>
<table width="100%" height="116" border="0" cellspacing="0" id="volledige_breedte">
{
width: 100%;
display: block;
background-image:url("golfje.png") no-repeat;
}
</style>
</head>
<body>
<table width="100%" height="116" border="0" cellspacing="0" id="volledige_breedte">
helaas werkt dit niet. Ik heb img#volledige_breedte verandert in table#volledige_breedte omdat ik dacht dat dat moest. Voor alle zekerheid heb ik img#volledige_breedte ook geprobeerd maar helaas werkt geen van deze.
ps: de afbeelding is een golfje om op de achtergrond van de tabel weer te geven en is nogal vervelend dat dat golfje niet doorloopt op een breed scherm. Het doet dus niks dat de afbeelding uitgerokken of samengedrukt wordt.
Gewijzigd op 01/01/1970 01:00:00 door B B
bram bex schreef op 04.03.2009 16:37:
Eddy Erkelens, jouw script werkt perfect! Het is helemaal wat ik in gedachte had maar er is een klein probleempje. Bij jouw script gebruik je een image tag maar het zou eigenlijk de achtergrond van een tabel moeten zijn. En ik weet niet hoe ik dat moet doen
Volgens mij is dat nog niet mogelijk.
Gerben van Erkelens schreef op 04.03.2009 16:44:
img#volledige_breedte
{
width: 100%;
display: block;
background-image:url("locatievandeafbeelding.jpg") no-repeat;
}
{
width: 100%;
display: block;
background-image:url("locatievandeafbeelding.jpg") no-repeat;
}
Cool, een soort van naamgenoot :D:D.
Die kom ik niet vaak tegen.
Edit:
... verrek: het editen ging niet helemaal zoals het hoorde.
Gewijzigd op 01/01/1970 01:00:00 door Eddy E
http://www.jankoehoorn.nl/examples/css/rekmee/
Om weer ontopic te gaan:
Hoe groot is golfje.png. Kun je ergens een voorbeeld uploaden?
Als het namelijk een plaatje is wat steeds herhaald kan worden dan kun je het volgende gebruiken:
Code (php)
1
<table id="volledige breedte">.....</table>
De CSS wordt dan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#volledige_breedte
{
width: 100%;
display: block;
background-image:url("locatievandeafbeelding.jpg") repeat-x;
}
{
width: 100%;
display: block;
background-image:url("locatievandeafbeelding.jpg") repeat-x;
}