[help] How to sort this out?

[KidRambo]

How do I sort the background thing out? I have put what needs to be sorted out in the picture.

 

[S3pHiRoTh93]

Is the background being made to repeat in the CSS? If so, add a no-repeat in your CSS. I think that should solve your problem.

 

[KidRambo]

Ok, Ill try it when I'm next on the computer.
Thanks for replying

 

[NubPro]

this is ezzzaayy

width:100%;
height:100%;
position:fixed;

 

[Parker]

Also looks like you're using the same gradient for the background, so what you could do to 'compress' the background image size is make it the same height, but make the width of the image 1px, and then use background-repeat: repeat-x; to repeat it horizontally.

 

[s-p-n]

Also looks like you're using the same gradient for the background, so what you could do to 'compress' the background image size is make it the same height, but make the width of the image 1px, and then use background-repeat: repeat-x; to repeat it horizontally.

his problem indicates that the gradient fades to a slightly different color left to right (in addition to the obvious up to down). And if he took your advice he wouldn't have that problem anymore and I don't think anybody would miss the left-to-right fade... But it just wouldn't be the same

 

[KidRambo]

*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}


body{background:#101010 url(images/bg.png) top left;color:#444;font-family:'Droid Sans',Tahoma,Arial,sans-serif;font-size:13px;line-height:1.6em;}
a{color:#383838;text-decoration:none;}
a:hover{color:#555;text-decoration:none;}
a img{border:none;}
h1,h2,h3,h4{clear:left;color:#fff;font-weight:400;margin:0.7em 0;font-family:'Yanone Kaffeesatz';}
h1{font-size:2.6em;}
h2{font-size:2.4em;}
h3{font-size:1.9em;}
p,ul{margin:0 0 20px 0;}
i,em {font-style:italic;}
b,strong {font-weight:700;}


#wrapper1240{margin:20px auto;width:1240px;}
#wrapper960{margin:20px auto;width:960px;}
#wrapper760{margin:20px auto;width:760px;}
#wrapper600{margin:0 auto;width:600px;}
#wrapperfluid{margin:0 auto;max-width:1260px;}
#wrapper1240,#wrapper960,#wrapper760,#wrapper600,#wrapperfluid{background:#fff url(images/contentbg.jpg) top left;box-shadow:#000 0 0 32px;}


#header{position:center;}
#sitetitle{float:left;margin:30px 0 10px 30px;}
#sitetitle h1 {font-size:40px;color:#fff;margin:0;padding:0;}
#header-image{height:300px;margin:0;padding:0;}
#content{padding:15px 30px;background-color:#643b1b;color:#ddd;}
#content h2,#content h3,#content h4{color:#ddd;}
#content a{color:#fff;text-decoration:underline;}
#extended{padding:15px 30px;background:#fff url(images/contentbg.jpg) top left;}
#extended h3{color:#333333;}
#extended a{text-decoration:underline;}


#toplinks{padding:0 30px;}
#toplinks ul{list-style:none;margin:0;text-align:left;}
#toplinks ul li{display:inline-block;font-size:11px;margin:15px 0 12px 15px;}
#toplinks ul li a{color:#dadddd;}
#toplinks ul li a:hover{color:#fff;text-decoration:none;}


#toplinks, #content, #footer{background:none;background-color:#1a1a1a;}


#nav{float:center;font-family:'Droid Sans',Verdana,Tahoma,sans-serif;text-align:center;}
#nav ul{list-style:none;margin:30px 30px 26px 20px;}
#nav ul li{background:none!important;display:inline-block;text-align:right;height:auto;line-height:25px;margin-bottom:0;margin-left:25px;position:relative;}
#nav ul li a{color:#333333;display:block;font-size:12px;padding-top:0}
#nav ul li a:hover{color:#333333;}
#nav ul li a.current{color:#333333;}


#sidebar{width:33.3%;}
#main{width:66.6%;}
#trio1{float:left;width:33.3%;}
#trio2{float:left;width:33.3%;}
#trio3{float:right;width:33.3%;}
.inner{margin:5px 30px;}
#trio1 .inner{margin-left:0;}
#trio2 .inner{margin:0;}
#trio3 .inner{margin-right:0;}
.left .inner{margin-left:0;}
.right .inner{margin-right:0;}


#footer{clear:both;background:none;background-color:#121212;}
#footer p{color:#ccc;font-size:12px;margin:0;padding:15px 30px;text-align:center;}
#footer a{color:#ccc;}
#footer a:hover{color:#eee;}

img.alignleft,img.aligncenter,img.alignright{background:#fff;padding:4px;margin-bottom:10px;border:1px solid #ddd;}
.alignleft{float:left;margin-right:30px;}
.alignright{float:right;margin-left:30px;}
.aligncenter{text-align:center;display:block;clear:both;margin:5px auto;}


.shadow{background:url(images/shadow.png) top center no-repeat;}
.clear{clear:both;}
.left{float:left;}
.right{float:right;}


.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
* html .clearfix{height:1%;}
*:first-child+html .clearfix{min-height:1%;}

.altcolors{background-color:#e6e8e8;}
.altcolors #wrapper600, .altcolors #wrapper760, .altcolors #wrapper960, .altcolors #wrapper1240, .altcolors #wrapperfluid {box-shadow: 0px 0px 28px #888;}
.altcolors #toplinks, .altcolors #footer{background-color:#eaecec;}
.altcolors #content{background-color:#f2f4f4;}

Thats the CSS, Its confusing lol, I got someone to make the website for me.

 

[Parker]

his problem indicates that the gradient fades to a slightly different color left to right (in addition to the obvious up to down). And if he took your advice he wouldn't have that problem anymore and I don't think anybody would miss the left-to-right fade... But it just wouldn't be the same

Ah okay, didn't eve notice the left<-->right change

 

[NubPro]

Thats the CSS, Its confusing lol, I got someone to make the website for me.[/QUOTE]
your coder and the guy who design this(you right?) are both bs and lack of experiences

replace 'images/bg.png' with this
https://dl.dropbox.com/u/32360643/bg.png

I cropped that image to a smaller size(1x1024)

Another hint:
Both of them works great to fix the issue of getting the content LARGER than the bg image

body {

//An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled

    background:#101010 url(images/bg.png) fixed; <<<<<<<<<<<<<

    color:#444;
    font-family:'Droid Sans',Tahoma,Arial,sans-serif;
    font-size:13px;
    line-height:1.6em;
}

or

body {
    background:#101010 url(images/bg.png);
    background-size:1px 100%; //automatically resize the height of itself until the content ends
    color:#444;
    font-family:'Droid Sans',Tahoma,Arial,sans-serif;
    font-size:13px;
    line-height:1.6em;
}

Preview:
https://dl.dropbox.com/u/32360643/checkthisoutdubstepad1231.PNG

It's pretty hard for me to explain everything....so yea go ahead and try it yourself

tell me if it really works

ps
You should really learn by hard yourself, instead of posting the codes and wants us to do it for you

 

[TimeBomb]

NubPro, CSS only supports the C comment syntax /* */, not the C++ comment syntax //. That just screws up the parser.

 

[NubPro]

NubPro, CSS only supports the C comment syntax /* */, not the C++ comment syntax //. That just screws up the parser.

yeaaa...xD doesn't really matter, if he understand the basics,he'll probably read them and remove those comments