NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Sådan bruger du CSS til at style dine baggrunde

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

Download kildefiler Download billederne fra videoen
I denne lektion skal vi arbejde med baggrunde i CSS. Vi skal prøve at tilføje en baggrundsfarve samt et baggrundsbillede til både vores body-element, en række div-elementer og et paragraf-element. Som du vil se i videoen, så kan du tilføje baggrunde til rigtig mange elementer. Derudover findes der adskillige muligheder for, hvordan du så kan få disse baggrunde (specielt billeder) til at opføre sig på siden.

Øvelser:
1 - Tilføj pow.jpg som baggrund på div1.
2 - Tilføj no-repeat til billede-baggrunden på div1, og centrer baggrunden midt i div1.
3 - Tilføj ydermere en baggrundsfarve til div1.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, Introduktion til CSS, baggrunde med CSS

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 6</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
      
        <div id="div1" >
            
            
        </div>
        
        <br/><br/>
        
        <div id="div2" >
            
            <h1>Overskrift 1</h1>
          
            
        </div>
       

    </body>
</html>
        

Her har du kildekoden

/* CSS filen */
body {
   background-color: grey;
   background-image: url(pow.jpg);
   background-repeat: no-repeat;
   background-position: 100px 100px;
   background-attachment: fixed;
}


#div1 {
    width: 500px;
    height: 500px;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    background-image: url(500x500.jpg);
}

#div2 {
    width: 500px;
    height: 500px;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

h1 {
  background-color: green;
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Johnny Erbs    2015-03-14

he he fandt ud af det der manglede semikolon som afslutning på den forgående linje :S


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    2015-03-14

Hej Johnny, Det lyder lidt underligt, for som du jo kan se på videoen så sker det ikke hos mig. Selvfølgelig skal man holde øje med, hvis Netbeans siger at der er fejl, men i dette tilfælde er din kode jo rigtig nok, og så behøver du ikke ligge mere i det. Er det kun disse 2 linjer den ikke kan lide, eller sker det også andre stedet? Mvh.


kommentar på NemProgrammering.dk - lav din egen hjemmeside
Johnny Erbs    2015-03-14

hej jeg har et par problemer med følgende i css: background-repeat: no-repeat; background-attachment: fixed; her siger netbeans unexpected token colon found, til dem begge 2. det er som om programmet ikke genkender disse linjer i css.


Forum stats

  • 1087 Antal brugere
  • 1568 Antal emner
  • 7888 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside