How can I move a background image to start it lower on the page?

ChancyRat

I pulled the code I was given to put a 2nd background image on my entire site Theme, and relocated it to an unlisted test gallery where I added a CSS block to the page and this code which I tweaked for position.

All of it works perfectly except - I would like the image to begin below the top navbar menu.
All the sites I find tell me that I should be able to put a pixel or percentage to force the image to start at a certain place vertically.
The example is in red, but it doesn't work.
If I change the 230 to something else, I see that a different part of the image is moved to the top, instead of moving the entire image down by a forced amount.

/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(/photos/i-MPDSnjz.png);
background-position: 0px [COLOR=Red]230px[/COLOR];
background-repeat: repeat;
background-size: 88%
}

How do I control the start position of the background image?
I hope I'm clear, I fear I'm repeating myself but only unclearly.

ChancyRat

I guess it's okay to share the test gallery, sorry I left that out.
http://www.joinrats.com/Other/Testchart/n-7prCZ

ChancyRat

Usually when you wise folk don't answer, it's because you want me to work harder. Or because the answer is "no can do" or something negative. I sure hope this time it's the former and not the latter. So, I have kept working, and I still can't find an answer. Is it possible to specify the part of the container that the background image should apply to, per:
http://www.w3schools.com/cssref/css3_pr_background-clip.asp

It appears for this I would need to know the name of the main body of the site, everything except the header section. Is this code known and usable for this purpose?

Thanks.

ChancyRat

Well I keep rolling along making up fixes but hoping there's another way. I created a full image background and added transparency to the top part. I guessed at the height needed, and missed the mark, and then additionally discovered that different browsers behave differently, so I probably can't control this at all. So I'm back to being stoppered.
Still listeningggggg.

ChancyRat

Is there CSS to set transparency to the header on one page?
I know one can set transparency in the main theme wrench, but that's by adjusting alpha bars, not adding CSS explicitly.

Maybe all I needed to do was ask for the CSS to set transparency to the background on the header, on this page only?

Oh, except I don't want the navbar text links to fade....

ChancyRat

I did it!
Turns out (I deduce, hopefully accurately) that repeat can't pair with moving the start position down.
As long as I use one image without repeat, I was able to make this work.

http://www.joinrats.com/Other/Testchart/n-7prCZ

/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(/photos/i-hBJWr4F.png);
[COLOR="Blue"]background-position: 0 140px;
background-repeat: no-repeat;[/COLOR]
[COLOR="blue"]background-size: 100%;[/COLOR]
}

After playing with the other option, I would almost rather have the background image fully on the page with the top portion transparent, but it appears different browsers can't position or control the size correctly. I kind of give up and will stick with what I found.

ChancyRat

I couldn't stand it, I reverted to the transparency option and tweaked the location to sort of manage the different browsers.

I'm DONE (I think).

/* Add personal background image */
html.sm-user-ui {
background-attachment: scroll;
background-image: url(/photos/i-z8rHBzd/0/O/i-z8rHBzd.png);
[COLOR="blue"]background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;[/COLOR]
}

ChancyRat

Oh, and for anyone who plays with this code, you have to log out of customizing to see the positioning properly. Or have a different browser open to the side where you view what the public sees. Logged in, even if you publish, distorts the positioning that you see.