Backgrounds made of colors AND images

[Alan Feuerstein]

K, so I'm working on giving my site a custom background. Nothing groundbreaking. But I'm running into a problem. Obviously, for any big forum, the index is gonna be taller than the picture. Unless you blend the bottom of the image into the basic background color, it looks ugly when there is an abrupt change. So, usually you set your background to a color that fits well with the image, then blend with a gradient in your graphic editor.

But you can't do that in xenForo, because in order to see the image at all, you HAVE to have a clear background (unless I'm missing some option). Is there a way to turn the background color on, and put it BEHIND the image, rather than in front, preferably without coding, cause I'm EXTREMELY new at xenForo and don't want to change any code I don't have to?

 

[Caelum]

The following line would make the image scroll along with the background instead of being stuck on one spot:

#bla {
background-image:url(http://bla.com/image.jpg);
background-attachment: fixed;
}

Also, the following CSS lets you put a background color behind a background image:

#bla {
background-image:url(http://bla.com/image.jpg);
background-color: #000;
}

You'd probably be replacing "#bla {" with "html {" if you're doing what I think you're doing. You'd also have to replace the background color's hex value if you're using a color other than black.

 

[Elizabeth]

K, so I'm working on giving my site a custom background. Nothing groundbreaking. But I'm running into a problem. Obviously, for any big forum, the index is gonna be taller than the picture. Unless you blend the bottom of the image into the basic background color, it looks ugly when there is an abrupt change. So, usually you set your background to a color that fits well with the image, then blend with a gradient in your graphic editor.

But you can't do that in xenForo, because in order to see the image at all, you HAVE to have a clear background (unless I'm missing some option). Is there a way to turn the background color on, and put it BEHIND the image, rather than in front, preferably without coding, cause I'm EXTREMELY new at xenForo and don't want to change any code I don't have to?

One thing to do is do a seamless tile of your image if at all possible. Also make your image as big as possible without losing quality. Then make sure you put the color behind the image that closely matches the images as much as possible.

Alan, I have an entire design house that is backgrounds over colors. That is my way of doing things, I love backgrounds. Just check out my forum at Secret City Designs

 

[Alan Feuerstein]

That first one sounds cool Caelum, looking at Elizabeth's site, her's moves when you scroll, I like it.

But I searched the templates and I couldn't find any code matching or almost matching what you posted. I assume I have to add it to one of the templates wholesale...but which? And where?

Appreciate the help!

 

[Caelum]

That first one sounds cool Caelum, looking at Elizabeth's site, her's moves when you scroll, I like it.

But I searched the templates and I couldn't find any code matching or almost matching what you posted. I assume I have to add it to one of the templates wholesale...but which? And where?

Appreciate the help!

Just add it to EXTRA.css
So, to be sure, add the following to EXTRA.css:

html{
background-image:url(http://yoursite.com/bla.jpg) !important;
background-attachment: fixed !important;
background-color: #000 !important;
}

On Elizabeth's site, it's a repeating pattern, tiling in the background. Depending on the image you're using as background, that may or may not work. If you're using one big background image, it usually won't though.

The code for that repeating pattern is:

html{
background-image:url(http://yoursite.com/bla.jpg);
background-repeat: BLA;
}

Where you can replace 'bla' with either 'repeat', 'repeat-x' or 'repeat-y'.