Avatar billede flemche Nybegynder
22. juli 2012 - 11:22 Der er 11 kommentarer og
1 løsning

Background-image resize

Hejsa

Er der nogen der ved hvordan man får et background-image i et DIV TAG til at resize sin størrelsen så det passer til DIV TAG'et.

Jeg ved godt der er en funktion under CSS3 (Background-size) som vist kan gøre det men jeg bruge ikke CSS3.

På forhånd TAK

/Lemche
Avatar billede olebole Juniormester
22. juli 2012 - 13:34 #1
<ole>

Det kan du ikke med HTML/CSS. Det kræver JavaScript. Det er ikke særlig hensigtsmæssigt at bruge JS til at 'redde' et layout/design - og desuden skal det være et meget specielt billede, hvis det skal blive pænt  =)

/mvh
</bole>
Avatar billede flemche Nybegynder
22. juli 2012 - 23:57 #2
Øv det ville ellers være nice.
Men hva' så må jeg vel resize det gennem photoshop.

Send mig et svar så sender jeg point den anden vej.

/Lemche
Avatar billede olebole Juniormester
23. juli 2012 - 10:42 #3
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)
Avatar billede mireigi Novice
26. juli 2012 - 15:19 #4
Du kan vel fuske det med z-index?

1. <div>
2. <img src="..." style="position: absolute; top: 0px; left: 0px;
      z-index: 0; width; 100%; height: 100%;" />
3. <p style="z-index: 1;>Din tekst her</p>
4. </div>
Avatar billede olebole Juniormester
26. juli 2012 - 21:27 #5
#4: "og desuden skal det være et meget specielt billede, hvis det skal blive pænt"  *o)
Avatar billede mireigi Novice
26. juli 2012 - 23:37 #6
#5: Men du er enig i, at fremgangsmåden er gyldig, omend ikke særlig pæn? :)
Avatar billede olebole Juniormester
27. juli 2012 - 00:25 #7
'Gyldig', ja ... men den er ikke pæn, og den virker ikke  =)
Avatar billede flemche Nybegynder
01. august 2012 - 23:23 #8
Jeg kan ikke rigtig få det til at virke.
Billedet bliver godt nok mindre men det opfører sig underligt og holder ikke dimensionen på div boksen.

Jeg har besluttet at gå efter resize modellen med et billedet som har en fixed size, da det er nemmere at arbejde med.

Tak for svarene.

@mireigi:
Selv om det ikke helt var det jeg gik efter kan du få pointne hvis du vil, da olebole ikke samler på dem.

/Flemming
Avatar billede mireigi Novice
01. august 2012 - 23:50 #9
Med denne kode virker det:
<div style="width: 300px; height: 200px; border: 1px solid #000; position: relative;">
    <img src="Unavngivet.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 0; width: 100%; height: 100%;" />
    <p style="z-index: 1; position:absolute;">
        Din tekst her</p>
</div>


Uanset om billedet er større eller mindre end div'en, blivet det tvunget op/ned i størrelse.

Som olebole siger, er den dog ikke særlig pæn, selvom det meste kan laves med CSS classes.
Avatar billede olebole Juniormester
19. august 2012 - 17:40 #10
Sker der noget?
Avatar billede flemche Nybegynder
04. april 2014 - 13:23 #11
Hej @mireigi

Jeg fik aldrig svar på om du ville have dine point.
Hvis ikke lukker jeg sagen.

/Flemming
Avatar billede flemche Nybegynder
07. juni 2014 - 12:27 #12
sagen lukkes.
Svar aldrig modtaget om point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester