Brugervenlighed & design på nettet

Svar: Hjælp til wrapper/baggrund

Andreas Brix — Mon, 14 Jan 2013 15:46:55 GMT

Hej Jacob.
Jeg tror du mener noget i denne stil, ik?

Prøv evt. at kigge her: http://cssdesk.com/ZdSjg

Mvh. Andreas / Webeo.dk

Svar: Hjælp til wrapper/baggrund

Andreas Brix — Mon, 14 Jan 2013 15:41:29 GMT

Jeg har aldrig set background-size: 100% 100%;

Hvis ikke den virker, så kan du bruge denne kode i CSS. Det virker i hvert fald både i firefox, cog chrome. Er lidt usikker om det også virker i IE.

Indsæt i CSS-dokumententet, ELLER i <head><style>indsæt koden her</style></head> i html-filen.

body {
background:url(stien/til/billedet) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}

Svar: Hjælp til wrapper/baggrund

Jimmy Thomsen — Mon, 14 Jan 2013 15:28:57 GMT

Hej,

Jeg har lavet det cirka således i et par templates til Sitemagic CMS:

HTML (placér det umiddelbart efter <body>):
<div class="Background"></div>

CSS:
body, html
{
padding: 0px;
margin: 0px;
}

div.Background
{
background-image: url("path/to/image.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}

Ovenstående giver dig et baggrundsbillede der automatisk skalerer til vinduet. Billedet står fast, selv om du scroller.

På ældre browsere skalerer billedet ikke - her vil du opleve at du i stedet får et udsnit af billedet svarende til den opløsning brugeren kører. Det kan derfor være en god ide at baggrundsbilledet er forholdsvis stort.

Svar: Hjælp til wrapper/baggrund

Anonymous — Mon, 14 Jan 2013 15:19:37 GMT

Hej Jacob,

Hvis jeg forstår det rigtigt, vil du have et baggrundsbillede, som er under dit indhold.

Dette laves i css: body { background: #000 url('images/bg.jpg/png') no-repeat; } <- #000 er baggrundsfarven, images/bg.jpg er stigen til billedet, no-repeat, repeat-x, repeat-y (er måden billedet skal gentage sig på.

Husk at lave et billede, der ikke fylder meget i kb (Dette vil gør dit website langsommere at loade)

Der findes et hav af forskellige tutorials, guidlines og tricks til at lave baggrunde i CSS hvis du googler efter det.

^ Håber det hjalp :)

Hav en fortsat god dag,

Venlig hilsen
Nils Pedersen

Svar: Hjælp til wrapper/baggrund

Jonas Jørgensen — Mon, 14 Jan 2013 15:11:36 GMT

Altså nu kommer det jo lidt an på, hvordan det du putter ind i din wrapper er kodet, men typisk er det bare en Div med en farve eller et billede.

Hjælp til wrapper/baggrund

Jacob Damsgaard — Mon, 14 Jan 2013 15:04:06 GMT

Hej derude.

Jeg kunne godt tænke mig at få en wrapper eller baggrund på min side, sådan så det ikke bare er gråt og kedeligt ude i siderne.

1. Skal disse laves på en bestemt måde? Tænker her skalaforhold mm.

2. Tak for hjælpen :)