Creating a Fixed and Visible background

[masterslacker]

I know some people like having a background image that stays in place, and is visible through the entries/comments/sideboxes, so here is a short tutorial on how to get it. I modified this community's background using these methods as an example to look at

Comments

[ex_koori435]

This worked like a miracle! Thank you sooo much!!

[stoirmeach]

I really like what you've done with your layout! Did you do that using smooth sailing? If you did, would you feel like sharing how you got the images to work as the headers for liv, friends, sites, etc?
btw, hope you don't mind, but I stole the color codes you're using. I always like nice green layouts but my greens I choose always look beyond shitty.

[ex_koori435]

Uhh, firstly, I'd like to thank you for the compliment but I must apologize 'cause this isn't the account I'm doing a Smooth Sailing layout on. I used S1 Punquin Elegant with Sidebar. And it really is okay, the colors and all!

Again, I'm really sorry!

[stoirmeach]

aaahh it's alright, that makes sense, I really couldn't figure out how you would have pulled that off using smooth sailing, I just figured I might as well ask, right? lol
Either way, it looks good, your layout right now.

[thehumangame]

I tried a variant on this once, making a lighter version of the page background, setting that as a background on the entries, comments, and sidebars, and setting background-attachment: fixed on that... but apparently it doesn't work in IE and background-attachment: fixed on elements that aren't the page body is really slow in Firefox if the page is even slightly complex. So I gave it up.

[masterslacker]

Internet Explorer doesn't really support anything that's fixed in place except a body background. So fixed div tags or fixed background images for div tags are no-no's.

Firefox does support them, but fixed backgrounds and transparencies take a lot of rendering, especially when there's lots of overlapping things, and it is generally very slow in any browser.

So I guess you could do them, but I could see why you gave up on it :)

[leathers]

I was referred here by magnoliasouth when I could not for the life of me figure this out. I knew it was more than likely going to come down to some sort of CSS tweak, but everything I tried didn't work and in some cases made things worse.

Thanks very much for posting this!

[ignote]

Is there anyway to make the entry background partially transparent?

[e_of_ink]

I don't know if this will answer your question. And also keep in mind that I'm extremely amateur when it comes to CSS and misc. I've changed the code to this

body { background-attachment: fixed; background-repeat: no-repeat; } .entryHolder, .commentHolder, .sidebox { opacity: 0.75; }

The only setback to it is that everything is at 75% (usericon, fonts and pics). I'm still playing, but I have yet to figure out how to just have the background at 75%).

Hopes this helps (somewhat).

[e_of_ink]

Oh. And I'm not sure it'll work in ie

[thspace_between]

Ok, I like all of the new changes that LiveJournal has made so you can edit and blog etc., so much easier, but I'm having a problem here.

In the Wizard, under the Layout tag, the option "Custom Stylesheet Information"

Maybe its because im tired with a stupid headcold, but I cant find the Wizard/layout tag so I can make my background stretch to fit and remain fixed and make it visible through the entries.

Anyone wanna take pity on me and post up the direct link to the Wizard and maybe send me some more Nyquil?

[masterslacker]

Sorry, the customisation interface was changed recently and I haven't updated the tutorial. Check out this recent tutorial that tells people how to apply CSS overrides:

http://community.livejournal.com/s2smoothsailing/79068.html (Part 2)

[thspace_between]

So then I just put this:

body { background-attachment: fixed; background-repeat: no-repeat; }
.entryHolder, .commentHolder, .sidebox { background: transparent; }

...into the CSS Stylesheet override and, voila! All fixed?

[masterslacker]

Yup, it should be, assuming that you also used the correct url for an image background under the "Images" section :)