And I also have a question: In your promo you linked a Belle theme (that's gorgeous btw) and I noticed that it's set to the far right of the page but when you don't have the browser at 100% it moves the whole thing to the left instead of cutting it off like so many themes (mine included) do. Could you teach me how to achieve that? It took me weeks to learn to code from scratch but there is so much for me to learn yet.
Absolutely, I would love to! (And thank you so much for the compliment!)
For others’ reference, this is the theme we’re discussing. What you’re describing is that, as you make the browser window larger or smaller, the background image and posts move along with the window, like this:
I accomplished this by placing all the necessary items (the background image, the post markup) inside a div, then making the div positioned. After that, I made use of the top, right, bottom, and left properties to place the div where I wanted it on the page. You can position any element on a page this way using these properties!
Here is the code I used to style the div, with relevant properties in bold!
 #postcontainer {   background-image:url(http://i.imgur.com/ABkGi50.png);   width:1000px;   height:696px;   position:fixed;   right:0px;   bottom:0px;  }
The position property is a bit tricky to explain! To put it as simply as I can, position:fixed; lets me put my div anywhere I want on the page, and to position it using, in this case, the right and bottom properties. I’m going to add some links at the bottom of the page which have fuller explanations, and if you’re confused about this part, please let me know and I’ll talk more about it!
The right and bottom properties, as you can see, are both set to 0px. This puts my #postcontainer div flush with the right and bottom sides of the page – it is 0 pixels away from either one, and it wants to stay that way. When you make the browser smaller like in the above gif, #postcontainer stays in its spot, 0 pixels away from the right and the bottom.
You can see this if you try to make the browser smaller in other ways, too!
When I pull in the browser from the left side, the #postcontainer div doesn’t care. It stays where it is, on the right, because that’s where I positioned it. If I pull up the browser from the bottom, the #postcontainer div moves with it, because it wants to always stay flush against the bottom of the browser.
(As you might notice in the gif, it is the bubble on the bottom left – which is actually the updates tab – that moves when you pull in the browser from the left side. That’s because the updates tab is positioned 0px away from the left, as opposed to #postcontainer, which is 0px away from the right.)
As an addendum, the reason that the blog posts themselves move with #postcontainer is because they are actually in a div nested inside #postcontainer, like this:
         …  Â
When #postcontainer moves with the browser (or doesn’t), it takes the posts with it.
Here are some helpful links that discuss positioning elements:
The “position” page of LearnLayouts.com
“Position” on Css-Tricks.com (one of my favorite websites!)
“Position” on the Mozilla Developer Network (NB: the language here is more technical and may not be as clear as the two pages above)
I hope I’ve answered this clearly! If there’s anything I can clarify, or anything else I can help you with, please let me know. nwn