ansaurus

Question

Background Images around flexible Content?

Answer 1

+1 A:

I did something similar for a website, the solution I came with was this:

I created an image with the left and right content on the background and the space of the content in the middle to just be a solid color, even though the image is 1400 x 539 it weights 12 KB, so it's pretty good.

<html>
  <body>
    <div id="wrapper"></div>
  </body>
</html>


body {
  background: #fff url(left-and-right.jpg) no-repeat center top;
  text-align: center;
}

#wrapper {
  margin: auto;
  text-align: left;
  width: 960px;
}

UberNeet 2010-01-28 11:14:00

thanks, but thats not my problem. using only one background image does not allow flexible width AND having the background always look the same. The more widht you have the less background you will see, right?Thats what i want to solve with two background images, always attached to the left and right of the content.

Mike 2010-01-28 11:20:14

d'oh! I forgot about the flexible width. I don't see this happening without the use of Javascript.

UberNeet 2010-01-28 12:10:47

Answer 2

+2 A:

you have an unnamed plain root container div.

Add this style for that div (or give a class/id name to wire css deceleration). Main point is min-width... Keep it same with your container div's width.

also adding body,html{margin:0;padding:0;} will be nicer.

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

this will work fine exept for ie6. For ie, you can apply some js magic.

Let's assume you're using jquery library and you gave id name "shell" to your root container div. Then try this script only for ie6. (create exclusion or something like that):

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

This script will make "shell"s width 100%. (if browser's width is larger than 950px) otherwise it'll lock shell's width with 950px and that will enable scrollbar.

ilhan negis 2010-01-28 13:03:04

Thats it. I just removed the height attribute. Didnt knew min-width and overflow trigger the scrollbar like that. Thanks!

Mike 2010-01-28 17:12:09

ansaurus

tags:

views:

answers:

Background Images around flexible Content?

related questions