Joomla Fixed Background

Status
Niet open voor verdere reacties.
B

Baveltje01

Gebruiker
Lid geworden
20 dec 2011
Berichten
52
Hallo allemaal,
ik heb een vraagje over Joomla.
Ik wil namenlijk een fixed background, maar ik heb echt geen idee hoe het werkt.
Ik snap er helemaal niets van, en heb ook al op veel websites gekeken.
Zouden jullie de code hieronder willen aanpassen zodat ik een fixed background heb?
Ik zou graag willen dat de website, www.hollandcraft.nl, de achtergrond blijft steken.

Ik heb het volgende gevonden:
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background-image: url (../images/background.jpg);
}
Klik om te vergroten...

De background die ik wil, is deze:
http://i1208.photobucket.com/albums/cc378/HollandCraft/MinecraftBGHOLLANDCRAFT.jpg
/*
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;} table {border-collapse: collapse;border-spacing: 0;}

/* Main Layout */
html {height: 100%;}
body { font:normal 13px/1.8em Arial, Helvetica, sans-serif; color:#555; }
body.contentpane { background:#fff;}
.background {position: absolute;width: 100%; background:#000 url(http://i1208.photobucket.com/albums/cc378/HollandCraft/Minecraftgrasland_bergen.jpg) 0 0 repeat-x}
h1,h2,h3,h4,h5,h6 {margin:0; padding:10px 0; font-weight:bold; color:#c44b16;font-family:Arial, Helvetica, sans-serif;}
.componentheading { font-style:italic;font-size:25px; margin:0; padding:5px 0 10px 0; color:#c44b16;}
h1{font-size:25px;}
h2 {font-size:20px;}
h3 {font-size:16px;}
h4 {font-size:14px;} h5 {font-size:12px;} h6 {font-size:12px;}
a {color: #c44b16;text-decoration:none;}
a:hover {color:#a92f12;text-decoration: underline;}
ul {margin:0 0 0 15px;}
p {margin-top: 0;margin-bottom: 10px;}
blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}
element.style { height:auto;}
hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}
.clr {clear: both;}

/* Header */
#search { width:960px; margin:0 auto; position:relative; height:20px;}
#search .button { margin:0 0 0 5px; padding:2px; background:#333; color:#ccc; border:1px solid #444;}
#search .button:hover {background:#222; color:#fff; border:1px solid #333}
#search .search { position:absolute; top:10px; right:5px;}
#search .inputbox { background:#333; color:#ccc; border:1px solid #444; padding:2px;}
#search .inputbox:hover { background:#222; color:#fff;}
#header { background:url(http://i1208.photobucket.com/albums/cc378/HollandCraft/HeaderSITEKerstmis.png) top center no-repeat; position:relative; height:120px; width:960px; margin:0 auto; border-bottom:1px solid #aa3013}
#header-w {position:relative;}
.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}
.top a {color:#fff; text-decoration:none} .top a:hover {text-decoration:none}
.logo { position:absolute; top:30px; left:30px; color:#fff;}
#slide-w { margin:0; padding:0; background:#F8F8F8; border-bottom:1px solid #d6d6d6;border-top:1px solid #f5f5f5;}
#slide { width:960px; margin:0 auto;}
/* Navigation */
#nav {}
#navl {}
#navr {background: none;height:33px; background:url(../images/nav.png) 0 0 repeat-x; border-bottom:1px solid #ddd}
#nav {z-index:10; position:relative;}
#nav ul {margin:0; padding:0; float:left;}
#nav ul li {list-style:none;float:left;height:33px;position:relative; padding:0; margin:0; border-right:1px solid #ddd;}
#nav ul li a { display:block;padding:0 10px; margin:0;line-height:33px;color:#555;font-weight:bold;text-decoration:none;font-size:14px; text-shadow:1px 1px #fff}
#nav ul li.active {}
#nav ul li.active a {color:#111; background:url(../images/nav-a.png) 0 0 repeat-x; text-shadow:1px 1px #fff}
#nav ul li:hover {}
#nav ul li a:hover{color:#fff;text-decoration:none;background:url(../images/nav-h.png) 0 0 repeat-x;text-shadow:1px 1px #000}
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none;}
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:3px 10px;line-height:20px; background:#e5e5e5 url(../images/nav.png) 0 0 repeat-x;border-bottom:1px solid #ddd;color:#555; font-size:11px;font-weight:normal;text-shadow:none;}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {background:#fff url(../images/nav-a.png) 0 0 repeat-x;color:#000; font-size:11px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}

/* Content */
#main { margin:20px auto 0 auto;background: url(../images/shadow.png) top center no-repeat; position: relative;}
#main-content { clear:both;margin:0 auto; padding:5px 5px 0 5px; background:#fff}

#maincol {position: relative;}
#wrapper { margin:0 auto; width:960px; padding:0;position: relative;}
.top1 {background:url(../images/main-top.png) 0 0 no-repeat;clear:both;}
.top2 {background: url(../images/main-top.png) 100% 100% no-repeat; }
.top3 { background: #fff; height: 6px;margin:0 6px;}
.bot1 {background:url(../images/main-bot.png) 0 0 no-repeat;clear:both;}
.bot2 {background: url(../images/main-bot.png) 100% 100% no-repeat; }
.bot3 { background: #fff; height: 6px;margin:0 6px;}
.shadow2 {background: url(../images/shadow2.png) top center no-repeat; height:8px;}
#comp_60 { width:530px; float:right; position:relative; padding:0; margin:0; min-height:300px;}
#comp_80 { width:740px; float:right; position:relative; padding:0; margin:0; min-height:300px;}
#comp_100 { width:950px; position:relative; padding:0;margin:0 auto; min-height:300px; }
#comp-i {padding:5px 10px 0 10px;}
#comp { float:left;}

/* Content styles */
ul.archive li { list-style:none; padding:0 0 0 10px;}
.archive .article-count {color:#999;}
.blog-featured {}
.items-leading {position: relative; clear:both; margin:0 0 20px 0; background:#F2F2F2; border:1px solid #ddd; padding:10px;}
.items-row {position: relative;clear:both;}
.item-page { position:relative}
h2.item-page-title { padding:5px 70px 10px 0;}
.item-page-title, .item-page-title a {text-decoration:none;}
.item-page-title a:hover {}
.buttonheading { position:absolute; top:5px; right:0;}
.buttonheading .edit {float:right;margin:0 5px;}
.buttonheading .print { float:right; margin:0 5px;}
.buttonheading .email {float:right;margin:0 5px;}
.iteminfo {font-size: 12px;overflow:hidden;margin-bottom:5px;display:block;margin-top:-10px;width: 100%; color:#999;}
.iteminfo a {color:#999;} .iteminfo a:hover {color:#333;}
.iteminfo .category {}
.iteminfo .sub-category { padding:0 0 0 5px}
.iteminfo .create {}
.iteminfo .modified {}
.iteminfo .published {}
.iteminfo .createdby {font-weight:bold; display:block}
.items-more {clear:both;} h3.items-more { font-size:14px; padding:0; margin:0;}
.items-more ol { margin:0 0 0 30px; padding:0}
th.list-title, th.list-author,th.list-hits,th.list-date { background:#3F332E url(../images/nav.png) 0 0 repeat-x; padding:2px; border-right:1px solid #ddd; color:#333;}
th.list-title a, th.list-author a,th.list-hits a,th.list-date a { color:#333; font-weight:bold}
td.list-title, td.list-author, td.list-hits, td.list-date { border-bottom:1px dotted #ccc;}
td.list-title { width:50%;}
td.list-author { width:15%; text-align:center;}
td.list-hits { width:5%;text-align:center;}
td.list-date { width:15%;text-align:center;}
.cols-1 {width:100%; clear:both;}
.cols-2 .column-1{width:49%;float:left}
.cols-2 .column-2{width:49%;float:right;}
.cols-3 .column-1{width:32%;float:left}
.cols-3 .column-2{width:32%;margin-left:1%;float:left;}
.cols-3 .column-3{width:32%;float:right;}
.cols-4 .column-1{width:23%;float:left}
.cols-4 .column-2{width:23%;margin-left:1%;float:left;}
.cols-4 .column-3{width:23%;margin-left:1%;float:left}
.cols-4 .column-4{width:23%;margin-left:0;float:right}
.column-1, .column-2, .column-3, .column-4 { position:relative;margin:0 0 20px 0}

/* Contact styles */
th.item-num, th.item-title,th.item-position,th.item-phone,th.item-suburb,th.item-state { background:#3F332E url(../images/nav.png) 0 0 repeat-x; padding:2px; border-right:1px solid #ddd; color:#333;}
th.item-num a, th.item-title a,th.item-position a,th.item-phone a,th.item-suburb a,th.item-state a {color:#333}
td.item-num {width:5%; text-align:center;}
td.item-title {width:25%; text-align:center;}
td.item-position {width:15%;text-align:center;}
td.item-phone {width:15%;text-align:center;}
td.item-suburb {width:15%;text-align:center;}
td.item-state {width:15%;text-align:center;}
.contact label { width:100px;font-weight:bold; float:left}
.contact input { float:left;}
.contact .jicons-icons { float:left; padding:5px 10px 10px 0;}
.contact h3 { font-size:14px;}

.spacer .module {float: left;}
.spacer.w99 .module {width: 100%;}
.spacer.w49 .module {width: 50%;}
.spacer.w33 .module {width: 33.3%;}
.spacer.w24 .module {width: 24.5%;}

.readmore { background: url(../images/li.png) 0% 50% no-repeat; padding:0 0 0 15px; margin:0; line-height:16px; font-weight:bold} .readmore a { color:#999;}
.readmore:hover {background: url(../images/lia.png) 0% 50% no-repeat;} .readmore:hover a,.readmore a:hover {color: #d15816;}
ul.pagenav { display:block;} ul.pagenav li { list-style:none;}
.pagenav-prev { float:left;}
.pagenav-next { float:right}
.pagination { clear:both;}
span.pagination { background:none;}
.pagination span, .pagination a, ul.pagenav li a {margin-right: 5px; padding:2px 5px; background:url(../images/button.png) 0 0 repeat-x; border:1px solid #ddd; color:#555;-moz-border-radius: 5px;border-radius: 5px;}
.pagination a, ul.pagenav li a { font-weight: bold; text-decoration:underline}
.button, .validate { background:url(../images/button.png) 0 0 repeat-x; border:1px solid #ddd; color:#555;cursor:pointer; padding:2px 5px;margin:0 0 10px 0;-moz-border-radius:5px;border-radius:5px;}
.button:hover,.validate:hover,.pagination a:hover,ul.pagenav li a:hover {background:#b6b5b5;color:#fff;}
.inputbox, input, textarea, select {background:#fff; border:1px solid #ddd;}
.inputbox:hover {border:1px solid #b6b5b5;}
.breadcrumbs { padding:0 0 0 10px;}
/* Sidebar */
#leftbar-w {width:210px; min-height:200px; float:left; margin:0;}
#rightbar-w {width:210px; min-height:200px; float:right; margin:0;}
#sidebar {padding:0}
#sidebar .module {padding:5px; margin:0;}
#sidebar .module-title {font-size:16px;font-weight:100;margin:0;height:33px; line-height:33px; color: #555; text-shadow:1px 1px #fff; padding:0 0 0 10px; }
#leftbar-w .module-title {background: url(../images/h3.png) 0 0 no-repeat;}
#rightbar-w .module-title {background: url(../images/h3.png) 0 0 no-repeat;}
#sidebar .module-body {margin:0; padding:0 5px; border:1px solid #ddd; background:url(../images/sidebar-bg.png) bottom center repeat-x}
#sidebar .module-body p{padding:0; margin:0;}
#sidebar ul li { margin:0 5px; padding:0;}
#sidebar .module ul.menu{margin:5px 0 0 0; padding:0;list-style:none; padding:0; list-style-type:none;}
#sidebar .module ul.menu li{ list-style:none; list-style-type:none;margin:0; padding:0; border-bottom:1px solid #e4e4e4;}
#sidebar .module ul.menu li a {display:block;margin:0; padding:3px 0 3px 15px;font-weight:bold;line-height:20px;background: url(../images/li.png) 0% 50% no-repeat; text-decoration:none; color:#999; font-size:13px;}
#sidebar .module ul.menu li a:hover { color:#a92f12; text-decoration:none;background: url(../images/lia.png) 0% 50% no-repeat;}
#sidebar .module ul.menu li.active a{color:#a92f12;background: url(../images/lia.png) 0% 50% no-repeat;}
#sidebar .module ul.menu li ul {border-top:1px solid #e4e4e4; margin:0;}
#sidebar .module ul.menu li ul li {background:none; border:none; margin: 0 0 0 15px; }
#sidebar .module ul.menu li ul li a{ border: 0; color:#999; background: url(../images/li.png) 0% 50% no-repeat;}
#sidebar .module ul.menu li ul li a:hover{ border: 0; color:#a92f12; background: url(../images/lia.png) 0% 50% no-repeat; }
#sidebar .module ul.menu li.active ul li a{color: #999; background: url(../images/lia.png) 0% 50% no-repeat;}
#sidebar .module ul.menu li ul li.active a, #sidebar .module ul.menu li.active ul li a:hover{color:#a92f12;}

/* Modules 1 */
#mods1 {overflow: hidden;padding:0; margin:0 auto;clear:both;}
#mods1 .module { padding:0; margin:0; }
#mods1 .inner { padding:10px; }
#mods1 .module-title {margin:0;padding:0 0 10px 0; font-weight:100}
#mods1 h3 {display: block;padding-left: 10px;padding-top: 3px;height: 20px;font-size: 16px;}
#mods1 .module-body {padding:0; margin:0;}
#mods1 ul {margin:0 10px; padding:0;}
#mods1 ul li {list-style:inside;}
#mods1-i { clear:both;}
/* Modules 2 */
#mods2 {overflow: hidden;padding:0; margin:0 auto;clear:both;width:960px; }
#mods2 .module { margin:0;padding:0;}
#mods2 .inner { padding:10px;}
#mods2 .module-title {margin:5px 0;padding:0;display: block;height: 18px;font-size: 16px;font-weight:100; color:#999;}
#mods2 .module-body {padding:0; margin:0;}
#mods2 a {color:#555; text-decoration:underline;}#mods2 a:hover { color:#fff; text-decoration:none;}
#mods2 ul {margin:0; padding:0;}
#mods2 ul li {list-style:inside;margin:0; padding:0;}
/* Modules 3 */
#mods3 {overflow: hidden;padding:0; margin:0 auto; clear:both; width:960px; color:#555; background:#b9b9b9 url(../images/mods3.png) 0 0 repeat-x;}
#mods3 .module { margin:0;padding:0;}
#mods3 .inner { padding:5px 10px 0 10px;}
#mods3 .module-title {margin:0 0 5px 0;padding:0;display: block;height: 18px;font-size: 16px;font-weight:normal; color:#fff; text-shadow:1px 1px #000;}
#mods3 .module-body {padding:0; margin:0;}
#mods3 a { color:#555; text-decoration:underline;}#mods3 a:hover { color:#000;}
#mods3 ul {margin:0; padding:0;}
#mods3 ul li {list-style:inside; border-bottom:1px dotted #a0a0a0; list-style:none;}
#mods3 ul li:hover {}
#mods3 ul li a {font-weight:100; display:block; text-decoration:none;padding:0 0 0 15px; background:url(../images/arrow.png) 0 50% no-repeat}

/* Footer */
#footer .top1 {background:url(../images/mods3-top.png) 0 0 no-repeat;clear:both;}
#footer .top2 {background: url(../images/mods3-top.png) 100% 100% no-repeat; }
#footer .top3 { background: #E8E8E8; height: 6px;margin:0 6px;}
#footer .bot1 {background:url(../images/mods3-bot.png) 0 0 no-repeat;clear:both;}
#footer .bot2 {background: url(../images/mods3-bot.png) 100% 100% no-repeat; }
#footer .bot3 { background: #B9B9B9; height: 6px;margin:0 6px;}
#footer { clear:both; margin:10px 0 0 0; padding:0;}
.footer-pad { width:960px; margin:0 auto; padding: 0;}
#bottom {width:960px; margin:0 auto; padding:5px 0 0 0;}
.copy { margin:0; padding:0 0 0 10px;font-size:12px; float:left;color:#fff}
.copy a {font-size:12px; color:#ccc}
.design {margin:0; padding:0 10px 0 0; font-size:11px; color:#222; text-align:right; float:right}
.design a { text-decoration:none; font-size:11px;color:#222}

/* System Messages */
#system-message { margin: 0; padding: 0;}
#system-message dt { font-weight: bold; }
#system-message dd { margin: 0; font-weight: bold; text-indent: 30px; }
#system-message dd ul { color: #0055BB; margin: 0; list-style: none; padding: 10px; border-top: 3px solid #84A7DB; border-bottom: 3px solid #84A7DB;}
/* System Standard Messages */
#system-message dt.message { display: none; }
#system-message dd.message { }
/* System Error Messages */
#system-message dt.error { display: none; }
#system-message dd.error ul { color: #c00; background-color: #E6C0C0; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
/* System Notice Messages */
#system-message dt.notice { display: none; }
#system-message dd.notice ul { color: #c00; background: #EFE7B8; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
/* Debug */
#system-debug { color: #ccc; background-color: #fff; padding: 10px; margin: 10px; }
#system-debug div { font-size: 11px;}
#error { width:600px; margin:100px auto 0 auto; padding:20px; background:#fff;-moz-border-radius:6px;border-radius:6px;}
#error .error { color:#FF0000}
Klik om te vergroten...

Alsjeblieeft, help me :D

Alvast bedankt,
Baveltje
 
Los van het feit dat je een lap code plaatst met de opmerking: kunnen jullie het even oplossen is heb ik er toch maar even naar gekeken.

Je heb nu in de body van je HTML de class background staan. In deze class staat background-image: #black url(http://etc.)

Als je deze regel wijzigt in : background-image: url(http://i1208.photobucket.com/albums/cc378/HollandCraft/Minecraftgrasland_bergen.jpg);
dan wordt de achtergrond herhaalt. De overgang is niet helemaal mooi maar hij wordt wel beeldvullend.

Is dit wat je zoekt?

P.s. Dit staat in je "style.css"
 
Hey,
Dankje dat je me wilt helpen.
Ik zou graag als het kan willen dat de background die ik heb, wordt Gefixt. Dat het niet meer beweegd. Mijn excuses voor de lange lap tekst.
Alvast bedankt,

Baveltje
 
lastig probleem :)
IE en de anderen doen dit verschillend.

IE gebruikt: <background="fixed"> of <bg properites="fixed"> of <body background="xxx.jpg" behavior="fixed">

mozilla (firefox) en opera zullen <body style="background-attachment: fixed; background-repeat: no-repeat;" background="achtergrond.jpg"> gebruiken.

ook zou je met css kunnen werken: (mooiste oplossing )

body
{
background-image:url("achtergrond.jpg");
background-repeat:repeat-y;
background-position:top center;
background-attachment:fixed
}
 
Even ter aanvulling (want op hollandcraft.nl is het nu geregeld):
Lastig probleem - IE en de anderen doen dit verschillend.
Klik om te vergroten...
Dit kan met een gerust geweten veranderd worden in:
"Geen lastig probleem meer - IE en de anderen deden dit verschillend."

Met ingang van IE7 ondersteunt IE de standaard css2.1-eigenschap {background-attachment:fixed}, dus IE7, IE8 en IE9 hebben er geen probleem mee.
Firefox, Chrome, Opera en Safari doen het ook.

Het gebruik van IE6 is inmiddels gezakt tot onder de 1%, en in de statistiek van het browsergebruik de laatste 3 maanden in NL komt IE6 al helemaal niet meer voor. Laatste vermelding van IE6 in StatCounter: periode juni-juli 2011, met 0,94%.
Daar zou ik me dus niet druk over maken. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Was uiteindelijk verschrikkelijk makkelijk
Thanks Wordpress for your easy plugins :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan