Hi,
I thought this would be just a matter of background-position: xx% and yy% but I found out that when given a percentage on a background image, it not just calculates the location of the viewport of the browser but rather that of the image too.
Here my image size is like more than 2000px in length, so I can have a "repeat-y" gracefully to cover the length of most modern available screen size. [Mock-up attached]
What I want to achieve is to have a centered content+sidebar (2 column) of roughly 960px but squeezable on the content side when browser is scaled. This way, the sidebar should always have that pseudo dark background while the content is on the bright background.
This is what I tried.
- A "container" DIV with a width of about 80em
- "Content" with 60% width and floated left
- "Sidebar" with 36% width and floated right
Very merrily, I went ahead and set the body to tile a repeat-y with the background-position set to "62% 0" assuming that it will calculate the location of the gutter mid between the "content" and the "sidebar". The background-image being tiled is the dark portion.
Any idea or direction I can experiment further would be really helpful. Thanking in anticipation.
5 answers
point
The real question is how hacky do you want to get?
- Nice. This looks cool enough.
- I think the point to be made here is: you don't need any images to accomplish what you're looking for.
points
When you are positioning backgrounds-images with percentage values it places the image x% x% of the element centered on x% x% of the image. Mozilla Dev explains it like so:
With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
https://developer.mozilla.org/en/CSS/background-position
points
That's a start. So now, how can I place the 0, 0 of the image (top-left corner of the image) to "62%, 0" of my BODY or any container for that matter.
points
I wonder if you could achieve this with four DIVs:
<div id="content-out">
<div id="content-in">
...
</div>
</div>
<div id="sidebar-out">
<div id="sidebar-in">
...
</div>
</div>
and:
#content-out { float:left; width:60%; min-height:100%; background-color:#333; }
#content-in { min-width:600px; margin:0 0 0 auto; }
#sidebar-out { float:right; width:40%; min-height:100%; background-color:#666; }
#sidebar-in { width:360px; margin:0 auto 0 0; }
- Hmmm, awesome. I tried that but here are the issues. * I think this is not a valid way of doing it. Try adding any doctype and it won't work. Even with <!doctype html> * Add more content to one of the content areas "content" or "sidebar". Whichever is shorter will have its background vanish in thin air if you scroll!
- 1. After adding a doctype, add "height:100%;" to html and body elements. 2. Assuming your content is going to be taller than your sidebar (most of the time), setting the background-color of the body element to that of the sidebar will fix this. Example: http://jstnryan.com/forums/doctype/Brajeshwar2.html
points
Btw, I found another smart cheat to do this - Creating Liquid Faux Columns
I'm still reading it at this moment and is rather interesting.
