/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Baggrundsbillede-tilpasning
Fra : Marc HK


Dato : 19-12-08 15:32

Er der nogen der ved hvordan man får et baggrundsbillede til at
tilpasse sig ens elements højde og bredde?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Rune Jensen (19-12-2008)
Kommentar
Fra : Rune Jensen


Dato : 19-12-08 09:09

On 19 Dec., 15:31, Marc HK <marchye-knud...@hotmail.com> wrote:
> Er der nogen der ved hvordan man får et baggrundsbillede til at
> tilpasse sig ens elements højde og bredde?

Det er der ikke en CSS-funktion til - men du kan aligevel "snyde" lidt
på body.

Kig på Stu Nichols cssplay

http://www.cssplay.co.uk/layouts/background


MVH
Rune Jensen

Philip Nunnegaard (19-12-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 19-12-08 19:07

"Rune Jensen" <runeofdenmark@gmail.com> skrev

> Det er der ikke en CSS-funktion til

Hverken i html eller css. Et baggrundsbillede har den størrelse som billedet
har.

> - men du kan aligevel "snyde" lidt
> på body.

> Kig på Stu Nichols cssplay

> http://www.cssplay.co.uk/layouts/background

Meget fiks løsning.
Altså: Så vidt jeg kan se, ligger hans løsning i at bringe billedet som et
forgrundsbillede (dvs. almindelig <img src=...>), der så har et andet lag
(<div>) inde over, således at dette forgrundsbillede ligner et
baggrundsbillede for det mennesklige øje.

Den metode går sikkert også fint på andre elementer end lige html og body,
hvis man bare positionerer korrekt og holder tungen lige i munden, så man
ikke ender med at positionere alt absolut på siden.


Rune Jensen (19-12-2008)
Kommentar
Fra : Rune Jensen


Dato : 19-12-08 13:47

On 19 Dec., 19:06, "Philip Nunnegaard" <nunnenos...@hitsurf.dk> wrote:

> Den metode går sikkert også fint på andre elementer end lige html og body,
> hvis man bare positionerer korrekt og holder tungen lige i munden, så man
> ikke ender med at positionere alt absolut på siden.

Jeg er næsten sikker på, den vil gå på andre elementer også. I hvert
fald i Opera, hvor jeg engang testede det med %-skalering (Opera har i
visse tilfælde en lidt spediel tilgang til %-størrelser. Eller havde
engang). Det er mest skaleringen, som kan blive problemet, det med at
positionere korrekt, forstår alle - standardoverholdende - browsere
svjv.

Turde bare ikke skrive andet end body, når ophavsmanden ikke lover
andet;)

Men det må være nemt at teste, lav et img, giv den %-størrelser via
CSS, og tjek om det skalerer i alle browsere. Ingen af browserne har
problemer med at skalere billeder med em, som også er en relativ
størrelse, heller ikke IE6.

Hm. OK, jeg laver en test... så kan det være, jeg vender tilbage;)


MVH
Rune Jensen

Rune Jensen (19-12-2008)
Kommentar
Fra : Rune Jensen


Dato : 19-12-08 17:37

On 19 Dec., 21:46, Rune Jensen <runeofdenm...@gmail.com> wrote:

> Hm. OK, jeg laver en test... så kan det være, jeg vender tilbage;)

Der er en slags "proof-of-concept" her:

http://runejensen.dk/temp/nyhedsgrupper/deiwh/baggrundsbillede.htm

Det lider under følgende:

1. Kun testet i Firefox
2. Det er hammerlangsomt (brug af min/max-width, masser af relative
størrelser mm)
3. Der er for meget fyldkode, og sandsynligvis fejlkode, da det ikke
er valideret

Men OK, kan være, jeg forfiner det på et tidspunkt, hvis det har
interesse.


MVH
Rune Jensen


Erik Ginnerskov (20-12-2008)
Kommentar
Fra : Erik Ginnerskov


Dato : 20-12-08 16:52

Rune Jensen wrote:

> http://runejensen.dk/temp/nyhedsgrupper/deiwh/baggrundsbillede.htm
>
> Det lider under følgende:
>
> 1. Kun testet i Firefox

Testresultat i IE 7:

Papirlappens størrelse ændres med vinduets størrelse.

Den røde ramme ligger under alle forhold (varierer efter vinduets
bredde)
langt til højre for papirlappen.

Testresultat i Op 9.62

Samme som i FF 3.0.4

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk


Rune Jensen (20-12-2008)
Kommentar
Fra : Rune Jensen


Dato : 20-12-08 12:12

On 20 Dec., 16:52, "Erik Ginnerskov" <erik.ginners...@live.dk> wrote:

>     Den røde ramme ligger under alle forhold (varierer efter vinduets
> bredde)
>     langt til højre for papirlappen.

Papirlappen "æder" også den vandrette scrollbar i IE7...

Nej, det kan måske klares med Conditional comments (hvis ikke man kan
klare det ved at bytte rundt på padding og margin - nogle gange kan
man snyde der)... men nu har jeg ikke set funktionen med skalerbart
baggrundsbillede så mange steder, og det er der nok en grund til, for
man kan fuldstændig maltraktere et billede på den måde - det er ikke
sikkert, det altid vil se kønt ud.

Nu har jeg så kigget lidt på det igen, og formentlig kan man lave
proportional scalering i stedet ved at sætte enten height eller width
på img til auto, men så giver det et andet design.

Så hvis det skal bruges i produktion et eller andet sted så skal idéen
helt sikkert gen-gennemtænkes og fejlrettes, ja. Men jeg synes bare
skavankerne ved skalerbart billede i sig selv er for store til at
bruge tid på det umiddelbart uden det har en vis mening (bortset fra,
det da er en meget sjov opgave). Måske Marc kan fortælle i hvilken
forbindelse det skal bruges?


MVH
Rune Jensen

Allan Vebel (20-12-2008)
Kommentar
Fra : Allan Vebel


Dato : 20-12-08 20:47

Marc HK skrev:

> hvordan man får et baggrundsbillede til at
> tilpasse sig ens elements højde og bredde?

Billeder bliver sjældent kønne af at blive skaleret
op eller ned, hvilket Runes eksempler med al
tydelighed.

Hvad vil du bruge det til?

--
Allan Vebel
http://html-faq.dk
http://vebel.dk



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408924
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste