No Scroll Background

[Jeremy M.]

I know i probably look like a dumb idiot for asking a bunch of stupid questions. I do have another one though. Normally, i can figure the "fixed background" out, but this one has me stumped. The code is below. I would like to keep the background the way it is now, i just don't want it to scroll. I want it fixed. What can i add?

Code Select Expand

/* MysticJade Styles */
#bodybg { background: #000 url(../images/custom/body-bg.jpg) repeat-x;}

[Sir Osis of Liver]

Code Select Expand



#bodybg { background: #000 url(../images/custom/body-bg.jpg) repeat-x fixed;}



[Jeremy M.]

Code Select Expand



#bodybg { background: #000 url(../images/custom/body-bg.jpg) repeat-x fixed;}



Didn't work, Krash. It totally deleted the background, and it's pure black. . lol

[Kindred]

this is what I use on my site...

background: #000000 url(../images/background.jpg) left top no-repeat fixed;

[Jeremy M.]

this is what I use on my site...

background: #000000 url(../images/background.jpg) left top no-repeat fixed;

That one won't work either. Below is the code that is currently used. I'm thinking that there is no fixed code that will work for this theme.

Code Select Expand

/* MysticJade Styles */
#bodybg { background: #000 url(../images/custom/body-bg.jpg) repeat-x;}

[Antechinus]

Set it on body, not on body-bg.

[Jeremy M.]

Set it on body, not on body-bg.

Tried everything. When i edit that code, the background image disappears, and it's just all black

[Antechinus]

No, you haven't tried everything. I know this for a fact, because setting a fixed background is really easy once you know how. I'm one of the best css guys here, and I have tried a lot more stuff than you have.

I can't recall how the latest version of MJ is put together, but body is the main element that holds your forum. Body-bg will be a custom div inside that. I do have a vague memory of telling Bikken it wasn't actually needed, but that's not important at the moment.

Body-bg will sit on top of body in the stack. What you have to do is remove the background from bodybg and set it on body.

[Jeremy M.]

No, you haven't tried everything. I know this for a fact, because setting a fixed background is really easy once you know how. I'm one of the best css guys here, and I have tried a lot more stuff than you have.

I can't recall how the latest version of MJ is put together, but body is the main element that holds your forum. Body-bg will be a custom div inside that. I do have a vague memory of telling Bikken it wasn't actually needed, but that's not important at the moment.

Body-bg will sit on top of body in the stack. What you have to do is remove the background from bodybg and set it on body.

Here's what i have come up with. It works 50% correct.  I removed the background from bodybg and set it on body. I repeated the background, and made it not to scroll. . . .

The first image is what my forum looks like right now (with the background in bodybg), and what i want it to look like with a no-scrolling background.
The second image is my forum, with a no scrolling background (after setting the background on body), but the image isn't doing what i want it to do.

[Antechinus]

Use repeat-x instead or repeat.

[Jeremy M.]

Use repeat-x instead or repeat.

The code below gives me the image below.   When i take the repeat-x off, it'll give me that second image on my recent post before this one.

Code Select Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background-image:url('http://www.free-information-help.com/Themes/MysticJade/images/custom/body-bg.jpg');
background-repeat:repeat-x;
background-attachment:fixed;
font: 13px/140% Tahoma, sans-serif;
margin: 0;
padding: 0;
}

[Antechinus]

You have to keep the background hex colour too if you want that below the background image.

COPY the default background attribute if you want it to look the same.

ADD fixed if you want it fiixed.

CALL it on body instead of body-bg if you want it fixed.

REMOVE it from body-bg if you want it on body.

DON'T just randomly change stuff without considering what it does.

DO use shorthand declarations to avoid bloating your css beyond all recognition.

Code Select Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #010101 url(../images/custom/body-bg.jpg) repeat-x fixed;
font: 13px/140% Tahoma, sans-serif;
margin: 0;
padding: 0;
}

[Jeremy M.]

You have to keep the background hex colour too if you want that below the background image.

COPY the default background attribute if you want it to look the same.

ADD fixed if you want it fiixed.

CALL it on body instead of body-bg if you want it fixed.

REMOVE it from body-bg if you want it on body.

DON'T just randomly change stuff without considering what it does.

DO use shorthand declarations to avoid bloating your css beyond all recognition.

Code Select Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #010101 url(../images/custom/body-bg.jpg) repeat-x fixed;
font: 13px/140% Tahoma, sans-serif;
margin: 0;
padding: 0;
}

I got it to work. I had to stretch the image in order for it to work tho.

[Kindred]

you did not need to do that...

see
http://void.turtleshellprod.com/

Code Select Expand


body {
    background: url("../images/background.jpg") no-repeat fixed left top #000000;
    color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    margin: 5px;
    padding: 5px;
    text-align: left;
}


[Jeremy M.]

you did not need to do that...

see
http://void.turtleshellprod.com/

Code Select Expand


body {
    background: url("../images/background.jpg") no-repeat fixed left top #000000;
    color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    margin: 5px;
    padding: 5px;
    text-align: left;
}


It won't work any other way. . I can't explain it any other way other than what i already have.

[Kindred]

Give me the code tha you are now using... And the URL that you are using it on

[Jeremy M.]

Give me the code tha you are now using... And the URL that you are using it on

Well, someone needs to shoot me in the head, seriously!  Got in to work the way i wanted!  This is the code i used!  The stuff in RED i was forgetting to put back in

body {
    background: url("http://www.free-information-help.com/Themes/MysticJade/images/custom/body-bg.jpg") repeat-x fixed left top #000000;
    color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
    margin: 5px;
    padding: 5px;
    text-align: left;
}

[Jeremy M.]

I just figured out that repeat-x means to repeat the images from left to right, and repeat-y means it repeats it up and down (X-axis, Y-axis). . . I'm such an idiot

[Kindred]

yup....    whcih is what we were trying to tell you.

If you get confused...
http://www.w3schools.com/css/
w3schools is not the "best" tutorial in the world... it has some mistakes... but for beginners, it is pretty good and very straight forward with good explanations

[Jeremy M.]

yup....    whcih is what we were trying to tell you.

If you get confused...
http://www.w3schools.com/css/
w3schools is not the "best" tutorial in the world... it has some mistakes... but for beginners, it is pretty good and very straight forward with good explanations

lol you didn't have to agree that i was an idiot. . . lmao :p