Bevægelig baggrund

Kunne vi få et link til din kode så vi kan se din opbygning??
Uden kode vil du ikke få særlig præsice svar...

problemet er at jeg fuckede det hele op i går i min desperation, men prøver lige om jeg kan grave noget frem:

body  {
text-align:center;
font-size:76%;
font-family:Tahoma, Arial, Helvetica, sans-serif;
line-height:1.3;
color:#fff;
background:#fff url(../images/bg_body.jpg) repeat-x;
position:relative;
float:left;
width:60%;
overflow:hidden;
}

Skal lige siges jeg er meget grøn i css, faktisk mit første site. Prøver at bygge en 1.5 template til Joomla. men CSS er jo CSS :)

<ole>

Skal al tekst i body'en virkelig være centreret?
Skal dit body-element virkelig kun være 60% af viewportens bredde?
Hvorfor position:relative på body-elementet?
Hvorfor float på body-elementet?

Du må linke til siden. Ellers er det stortset umuligt at hjælpe  :)

/mvh
</bole>

Hej Ole

Jeg knokler derudaf med nogle eksempler, så jeg har pt ikke noget konkret at vise, men her er en mindre forklaring:

Skal al tekst i body'en virkelig være centreret?
Ja i body skal den, den ændres længere nede, lærte det som et hack til IE, da den ellers kan have problemer med visningen.

Skal dit body-element virkelig kun være 60% af viewportens bredde?
Dette var bare et forsøg på at seh vad der havde effekt på hvad.

Hvorfor position:relative på body-elementet?
Den her har jeg endnu ikke helt fattet hvad gør af forskel, har prøvet at læse mig til det på html.dk, men leger lidt med det forskellige.

Hvorfor float på body-elementet?
Lidt det samme som ovenstående, skal lære de enkelte begreber at kende.

Så alt i alt bliver det her nok ikke til det store mesterværk, men jeg håber på at lære css egenskaberne så jeg kan lave noget helt perfekt :)

mvh

Henrik

CSS skræddersyes altid til en bestemt markup kode, så man kan ikke rådgive omkring CSS uden at kende den nøjagtige markup  :)

Det er ikke nødvendigt at 'hacke' centrering i IE med text-align, hvis man skriver ordentlig HTML-kode. Igen: Prøv at vise noget kode, så vi kan få rettet den i den rigtige rækkefølge.

Pas på html.dk, som er kendt for at have meget små huller mellem fejlene. Ikke mindst deres CSS-tutorials/-artikler er af yderst ringe kvalitet  :o|

Der er jo også det problem at dit billede jo altid vil have en bestemt størrelse, mens det lag, som bg-billedet ligger i, jo har width:60%;... dvs. størrelsen ændrer sig alt efter opløsning.

Ergo får du I andre opløsninger end den du har udviklet i, problemer med at få billedet til at passe (vil jeg tro) :)

Det slog mig også lige måske jeg skulle flytte min baggrund ud fra body og ind i en div i stedet for, hvor body jo står udenfor.

Jeg har gennemgået css tut. fra html.dk bare for kendskabens skyld, men bruger en joomla tut for at få det jeg har har behov for. det har jeg fundet en tut der laver en 100% css styret hjemmeside, så index.php må siges at indeholde næsten ingenting.


Tut'en jeg går ud fra kan findes her, og det er så ud fra den jeg prøver at ændre baggrund m.m.
http://www.compassdesigns.net/joomla-blog/joomla-news/new-template-tutorial-for-1.5-and-two-free-templates.html

Jeg kan stadigvæk ikke se den kode, din CSS skal virke i - og kan derfor ikke hjælpe

hvis man ud fra linket henter koden i template.css ud, ser den sådan her ud:


* {
margin:0;
padding:0;
}

body {
text-align:center;
font-size:76%;
font-family:Tahoma, Arial, Helvetica, sans-serif;
line-height:1.3;
background:#333;
}

#wrap {
text-align:left;
margin:0 auto;
width:960px !important;
}

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}

#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:12px Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}

#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:10px 10px 0 10px;
padding:10px;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}

#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}

#bottom {
background:#333;
color:#666;
padding:10px 50px;
}

#sidebar {
float:left;
width:20%;
}

#content60 {
float:left;
width:60%;
overflow:hidden;
background:#fff url(../images/pagetop.png) repeat-x;
}

#content80 {
float:left;
width:80%;
overflow:hidden;
background:#fff url(../images/pagetop.png) repeat-x;
}

#content100 {
float:left;
width:100%;
overflow:hidden;
background:#fff url(../images/pagetop.png) repeat-x;
}

#sidebar-2 {
float:left;
width:20%;
}

.inside {
padding:10px;
}

#sidebar .inside,#sidebar-2 .inside {
padding-top:0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address,.componentheading,.contentheading {
margin:0.75em 0;
}

li,dd {
margin-left:1em;
}

fieldset {
padding:.5em;
}

a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}

h1,.componentheading {
font-size:1.8em;
}

h2,.contentheading {
font-size:1.6em;
}

h3 {
font-size:1.3em;
}

h4 {
font-size:1.2em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
font-weight:700;
}

.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
line-height:25px
font-size:14px;
margin:4px 0;
padding:0 4px;
cursor:hand;
}

.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}

.sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}
.sectiontableheader a:link,.sectiontableheader a:visited {
color:#fff;
}

/* Module styling */
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}

.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

/*Menu Styling*/
.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}

/*Tab Menu Styling*/

.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
margin:0;
padding:0;
background:#212121;
width:100%;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}

.design a:link,.design a:visited {
color:#666;
float:right;
font:0.8em Verdana, Arial, Helvetica, sans-serif;
}


Det er så ud fra den org. kode jeg vil prøve at få en baggrund som billed som kan håndtere resize.

Meget gammelt spg som ikke er blevet lukket. sorry