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

1
point

The real question is how hacky do you want to get?

Answered almost 7 years ago by Justin Hileman
  • Nice. This looks cool enough. Brajeshwar almost 7 years ago
  • I think the point to be made here is: you don't need any images to accomplish what you're looking for. Justin Ryan almost 7 years ago
0
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

Answered almost 7 years ago by Jens Hedqvist
0
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.

Answered almost 7 years ago by Brajeshwar
0
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; }

View test

Answered almost 7 years ago by Justin Ryan
  • 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! Brajeshwar almost 7 years ago
  • 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 Justin Ryan almost 7 years ago
0
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.

Answered almost 7 years ago by Brajeshwar