Avatar billede glenp Nybegynder
26. maj 2013 - 23:14 Der er 6 kommentarer og
1 løsning

Baggrundbillede i Wordpress

Hej..

Jeg er helt ny inden for programering af hjemmesider. Jeg har derfor dette spørgsmål. Jeg arbejder på min side www.westcoastadventure.dk

Hvordan får jeg baggrundsbilledet til at fylde hele skærmen, istedet for at blive gentaget når opløsningen ændres.

Kan det lade sig gøre at lægge et næsten gennemsigtigt "grid" hen over billedet ?

Forklaringen skal være helt ned i detaljer da jeg ikke er så god til det endnu :) På forhånd tak
Avatar billede Vixo Novice
26. maj 2013 - 23:31 #1
Inde i css filen, skal du finde det id/class som viser baggrunden.
Det er sikkert "body".
Der hvor du har placeret baggrundsbilledet.
Så skriver du:

background-repeat:no-repeat;

Så skulle det vidst gerne virke :-)
Avatar billede glenp Nybegynder
27. maj 2013 - 08:26 #2
Okay.. Kan du vise mig hvor det præcist er jeg skal sætte det ind ?

html, body {height: 100%;}

body
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/da_DK/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{

    font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #686a6f;
}

h1, h2, h3 {
    font:12px 'PT Sans Narrow', sans-serif;
    color:#4e5157;
    text-transform:uppercase;
}
h1 {font-size:30px;}
h2 {font-size:22px;}
h3 {font-size:18px;}
hr{
    background:url(images/divider-grid.gif);
    border:1px solid #fff;
    width:100%;
    height:100%;
    margin:20px 0px;
}
a{color:#4e5157; text-decoration:none;}
a:hover{color:#5d8fb9; outline: 0; cursor:pointer;}
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
input, textarea{
    background-color:#adadad;
    padding:5px;
    border:1px solid #c9c9c9;
    display:block;
    color: #a1a2a4;
    font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
   
    -webkit-box-shadow: inset 1px 1px 1px 1px rgba(1, 1, 1, .1);
    -moz-box-shadow: inset 1px 1px 1px 1px rgba(1, 1, 1, .1);
    box-shadow: inset 1px 1px 1px 1px rgba(1, 1, 1, .1);
   
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input:focus, textarea:focus{
    color: #686a6f;
}
.shadow{
    -webkit-box-shadow: 1px 1px 1px 1px rgba(5, 5, 5, .1);
    -moz-box-shadow: 1px 1px 1px 1px rgba(5, 5, 5, .1);
    box-shadow: 1px 1px 1px 1px rgba(5, 5, 5, .1); 
}
#wrapper{
    margin:20px auto;
    width:1000px;
    position: relative;
}
             
/*-----------------------------------------------------------------------------------*/
/*    Background
/*-----------------------------------------------------------------------------------*/
#bg {position: fixed; top: 0; left: 0; width:100%; height 100%; display:none;}
.bgwidth {width: 100%;}
.bgheight {height: 100%;}
.grid{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(http://westcoastadventure.dk/wp-content/uploads/2013/03/DSC03583-Medium.jpg);
    z-index: 8;
}
Avatar billede Bdev Nybegynder
27. maj 2013 - 10:03 #3
background-repeat:no-repeat; skal indsættes i #bg fx i linien under
background: url(http://westcoastadventure.dk/ (...));

Søren
Avatar billede Vixo Novice
27. maj 2013 - 14:44 #4
/*-----------------------------------------------------------------------------------*/
/*    Background
/*-----------------------------------------------------------------------------------*/
#bg {position: fixed; top: 0; left: 0; width:100%; height 100%; display:none;}
.bgwidth {width: 100%;}
.bgheight {height: 100%;}
.grid{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(http://westcoastadventure.dk/ (...));
    background-repeat:no-repeat;
    z-index: 8;
}
Avatar billede glenp Nybegynder
30. maj 2013 - 10:03 #5
Jeg har prøvet at indsætte linjen men det virker ikke ??
Avatar billede glenp Nybegynder
30. maj 2013 - 10:07 #6
Jeg har nu fundet løsningen:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg',
sizingMethod='scale');
-ms-filter:
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg',
sizingMethod='scale')";
}

Mange tak for hjælpen her inde
Avatar billede Bdev Nybegynder
30. maj 2013 - 19:22 #7
Det lyder godt at det lykkedes -  bare husk at tjekke din løsning i flere forskellige browser typer.

Søren
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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