Sette inn bilde i html ved hjelp av CSS

razor
razors bilde
Avlogget
Ble med: 11.12.2009

Hei, jeg lurer på en ting.

Hvordan sette inn ett bakgrunnsbilde i html dokumentet.

Blir noe forvirra her, men..det sies att jeg bare skal sette inn denne koden i CSS filen:

body {background-image:url('paper.gif')}

URL, skal det ikke hentes fra internett da eller? for bilde jeg skal bruker, befinner seg på bilde mappa på datan.

SÅ, hvordan skal jeg kunne hente ut bilde fra datan og inn i html dokumentet?

Må jeg skrive en kode i html før jeg kan sette det inn?

skjønner liksom ikke hva de mener med url ("kilden"), hvordan og hvor skriver vi denne koden så jeg får inn bakgrunnsbildet.

Håper på ett svar =)

hilsen html

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Bakgrunnsbilde i HTML dokument

Hei, som du helt sikkert vet så ser et HTML-dokument generelt sett slik ut:

<html>
    <head>
        <title>En eller annen tittel</title>
    </head>
    <body>
        <p>Innhold på siden</p>
    </body>
</html>

CSS-koden du henviser til, nemlig

body {
   background-image: url('paper.gif');
}

Peker på <body> taggen i HTML-dokumentet. Her sier man at bakgrunnsbildet for denne taggen skal være filen paper.gif.

URL er kun plassen hvor filen er lagret, det kan enten være en en nettadresse, eller en lokal bane. Hvis filen ligger i bildemappa, kan du skrive inn filbanen til bildemappa.

Dette er ikke spesielt lurt, for hvis du skal laste opp HTML og CSS til webhotell, så peker fortsatt CSS-filen til bakgrunnsbildet på din PC lokalt.

I ditt eksempel må i såfall filen paper.gif ligge i samme mappe som CSS-filen som henviser til den. Det blir fort rotete å blande CSS, bilder og andre ressurser. Derfor kommer noen tips om mappestruktur.

Mappestruktur

Det du bør gjøre er å opprette en egen mappe hvor du legger alt som har med prosjektet ditt å gjøre, feks: min_nettside. I denne mappen lager du en ny mappe som heter assets. I assets kan du legge bildefiler.

Gjør du dette, kan du angi plasseringen av bakgrunnen slik:

body {
   background-image: url('./assets/paper.gif');
}

Laster du senere opp mappen min_nettside som inneholder HTML-dokumenter, CSS-dokumenter og mappen assets som inneholder alle elementer (bilder o.l), så vil det fungere.

Merk at ./ refererer til den mappen man er i (relativ filbane). Altså må CSS-dokumentet ligge under (ikke i) mappen assets i dette tilfellet, slik

min_nettside      (dir)
  index.html
  style.css
  assets          (dir)
    paper.gif
Anonym
Anonyms bilde
Bilde i html

Ok, da har jeg ordnet meg en mappe inndeling her.

Filstrukturen

(c:)  min_nettside (dir)
       test.html
       test2.css
       assets (dir)
        malmsteen.jpeg

Prøver nå å kun få inn ett bilde i html, ved hjelp av denne koden:

<img src="./min_nettside/assets/malmsteen.jpeg" alt="malmsteen">

Men får ingen bilde, det står bare malmsteen der.

HTML-dokumentet

Jeg driver bare å tester litt, her er min html side:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
      <Head>
            <title>Dette er en test side</title>
            <link type="text/css" rel="stylesheet" media="all" href="test2.css">
      </head>
      <body>
            <div id="main-content">
              <h1 class="title">Hei og velkommen</h1>
              <hr />
              <p>Dette er bare en test side</p>
              <p><b>This text is bold</b></p>
              <p><i>Hello everyone</i></p>
              <p><img src="./min_nettside/assets/malmsteen.jpeg" alt="malmsteen"></p>
              <p>Her er linken til startsiden <a href="http://www.startsiden.no" title="Startsiden" target="_blank>Startsiden</a>.</p>
            </div>
      </body>

hva kan jeg gjøre annerledes her?

ModEdit: Som den pedanten jeg er, måtte jeg rydde i koden din før jeg svarte, hehe

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Bildefil i img-tag, filbaner og rygging av HTML-kode

Dette ser ikke så halvgæærnt ut dette. :)

Filbaner

Hvis bildefilen malmsteen.jpeg ligger i mappen assets, og HTML-dokumentet i mappen min_nettside, så angir du src-attributten slik:

src="./assets/malmsteen.jpeg"

Dette indikerer at HTML-dokumentet ligger i den mappen hvor punktumet er, og det er jo i ditt tilfelle i diren min_nettside.

Manglende anførselstegn

Dette har ingenting med bildet å gjøre, men startsiden-linken din mangler et anførselstegn på target="_blank"

Manglende lukking av html

Prøv å angi alle HTML-tagger med små bokstaver (se på <Head>-taggen din.

Husket du å lukke filen med </html> etter </body>, eller mangler den bare i pasten?

razor
razors bilde
Avlogget
Ble med: 11.12.2009
Filbaner

ja riktig, da har jeg rettet på denne feilen:

<img src="./min_nettside/assets/malmsteen.jpeg" alt="malmsteen">
src="./assets/malmsteen.jpeg"

jeg refresher siden men ingenting skjer

Tror du jeg må sette inn en kode i css filen ? for jeg får bare ikke inn det bildet i html dokumentet.

Men er det ikke på samme måten når jeg skal legge til en bakgrunn i html`n ? (med tanke på fil bane oppbyggningen)

Jepp, husket på å lukke den ble bare ikke med når jeg kopierte tenker jeg.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Et eksempel på bilde i HTML og CSS

Hei, jeg snekret sammen et lite eksempel til deg. Da er det kanskje lettere å se. Alt står forklart i HTML og CSS koden. Les den nøye :)

Eksempel på bilde i HTML og CSS

Last ned eksempel på bilde i HTML og CSS. Dette er ei zip-fil, så du må pakke den ut først.

La meg få høre om du forsto noe av det.

razor
razors bilde
Avlogget
Ble med: 11.12.2009
Bilde i html :(

Hei igjen ^^

Nå har jeg studert dette en uke snart, og lurer på om jeg kan gjøre noe feil her.

Dette har jeg gjort: Laget en mappe

(c:\) min_nettside (dir)
       html
       css
       assets (dir)
        malmsteen.jpeg

hmm, hva kan gå galt her...jeg har altså laget mappene med filene.

Da ser html`n min slik ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>minside</title>
            <link type="text/css" rel="stylesheet" media="all" href="stil.css">
      </head>
      <body>
            <div id="main-content">
              <h1>Velkommen til min hjemmeside</h1>
              </p><div class="image">
              <img src="./assets/malmsteen.jpeg" alt="malmsteen" width="350" height="300" />
            </div>
      </body>
</html>

Bildet "malmsteen" er i størrelsen 800x600, jeg skrev deretter ned til 350x300.

Slik ser CSS`n ut:

body {
  background-color:#d0e4fe;
}
div.image {
  margin-top: 20px;
  padding: 10px;
  float: left;
}

For meg virker det ganske så likt det du har gjort.

Jeg får ikke noe bilde i html, men får istedenfor bare "malmsteen" (skriften)

Fant forresten ut at jeg MÅ ha CSS og HTML filene sammen i samme mappe, ellers funka det ikke.

*Har du noe peiling på hva jeg kan gjøre feil her?

razor
razors bilde
Avlogget
Ble med: 11.12.2009
Bilde i html :) det fungerte

Jeg prøvde å sette bildet som ett png-format istedenfor, da funket det mye bedre.

Kan jeg bare bruke png-formater? for jpeg formatene fungerer ikke.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Alle bildeformater går

Neida, du kan bruke både jpg, gif, png osv i HTML og CSS, ingen problem. Det du har gjort ser riktig ut. Her kan det være surr med filnavnet.

File extension (filetternavnet) til jpg-bilder er ofte jpg og jpeg eller JPG og JPEG. Merk at Linux er case sensitive (tar hensyn til store og små bokstaver) på filnavn. Kanskje filen din er angitt med store bokstaver, eller at bildet egentlig har filetternavnet jpg og ikke jpeg?

God praksis er uansett å bruke små bokstaver på alle filnavn. Videre bør man holde seg unna mellomrom, bruk heller bindestrek eller underscore.

At du får opp teksten i alt-attributten fremfor bildet er normalt når det skjer noe galt. Hvis du vil at jeg skal se på det, så kan du godt zippe hele rakkelverket og legge det opp på dump.no eller henvise meg til URL'en hvor du har dette liggende.

Bildestørrelser

Dette har ingenting med visningsproblemene å gjøre, men jeg vil likevel gjøre deg oppmerksom på noe. Du sier at du rescaler bildet, det bør du ikke gjøre, da er det bedre å resize og croppe bildet til ønskede dimensjoner i en bildeeditor, for så å bruke det i HTML.

Hvis du har et bilde på 800x600 piksler som er si 0,5 MB og du ønsker å vise det i 400x300 og angir dette i width og height-attributtene på img-taggen, så vil det føre til et par ting:

  1. Bildet på 800x600 vil bli lastet ned i sin helhet, altså 0,5MB
  2. PCen til klienten må rescale bildet, og det krever ekstra RAM
  3. Rescalet bilde vil ikke se særlig bra ut i de fleste tilfeller

Riktig bruk av width og height er å angi bildets korrekte dimensjoner. Grunnen til at man gjør dette, er for å legge beslag på plassen så fort folk kommer inn på nettstedet. Hvis du ikke angir width og height så vil nettstedet "hoppe" opp og ned etterhvert som bilder lastes inn. Videre må nettleseren finne dimensjonene på bildet (ved å analysere MIME-data, noe som øker lastetiden på websidene dine.

For å få best resultat er det også viktig at du holder riktig aspect ratio, dvs at forholdet mellom høyde og bredde er likt. feks bør et bilde på 128x64 resizes til 64x32 og 32x16 osv, rett og slett at man resizer hver dimensjon like mye, hvis ikke blir det fort mye rare resultater. :)

HTML og CSS i samme dir

Du sier du måtte ha HTML og CSS i samme mappe for at ting skulle fungere, da har du oversett noe, for det er ikke nødvendig. Jeg skal skrive et innlegg om filbaner nå. Kommer hit og henviser til det.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Relative og absolutte filbaner

Sånn, nå har jeg skrevet et langt innlegg om relative og absolutte filbaner. Still spørsmål som gjelder relative og absolutte filbaner i den nye tråden, hvis det er noe du lurer på. :)

AdrianM
AdrianMs bilde
Avlogget
Ble med: 22.03.2010
enn vis jeg har et bildet som

enn vis jeg har et bildet som heter   dfgkjdkgjk.jpg    og ikke  sdfsdfsdf.gif

AdrianM
AdrianMs bilde
Avlogget
Ble med: 22.03.2010
er det noen som kan hjelpe

er det noen som kan hjelpe meg med å få et bilde som bakrund på css'en min??div#main {         width: 70%;         margin: 0 auto;}

top_menu {  width: 105px;}

b{  text-align:center;}

h1{  font-family:"Monotype Corsiva";  font-size:55px;  color:red;  text-align:center;}

h3{  text-align:center;}

ul{  font-family:"Monotype Corsiva";font-size:20px;}

h2{  text-align:center;}

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Legg inn bilde som bakgrunn med CSS

Bruk background: url('path/til/fil.png'); på det elementet hvor du ønsker bakgrunnen.

Det spiller ingen rolle om det er jpg, png, gir el.l

AdrianM
AdrianMs bilde
Avlogget
Ble med: 22.03.2010
kan du prøve å legge bakrund

kan du prøve å skrive css koden på mitt css?bildet heter: Page-BgTexture.jpgcss teksten har jeg krevet lengere opp

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.