April 30, 201016 yr Hi, I hoping someone could help me out with this problem I have been having. I have a div based layout and the main content is 998px wide. However, I want to have a top to bottom gradient (which I have a 1px wide image repeating), and I want to have two images coming of the side of the main content. However when I put those images in a div and positioned them where I wanted them to be, I realized that they would force a scrollbar. But, for some reason now (as you can see in the pictures) the left image doesn't force a scroll bar, but the right image does. I am sure there is probably a better way to do this, but I don't have very much website experience. I have included examples, and some of my css/html code. Let me know if you need anything else. Any help would be greatly appreciated. Thanks. http://imgur.com/KQfc1.jpg http://imgur.com/UiQ4H.jpg .bg { position: absolute; left: 50%; } .bgalign { height: 100%; width: 100%; } .innerbg1 { position: relative; left: -640px; } .innerbg2 { position: relative; left: 408px; } .leaf1 { float: left; height: 345px; width: 234px; top: 513px; position: absolute; background-image: url(images/leaf1.png); } .leaf2 { height: 355px; width: 234px; position: absolute; top: 610px; background-image: url(images/leaf2.png); <body> <div class="bg"> <div class="bgalign"> <div class="innerbg1"><div class="leaf1"></div></div> <div class="innerbg2"><div class="leaf2"></div></div> </div> </div> //content is down here Edited May 4, 201016 yr by Sam G added [code] tags
May 6, 201016 yr The thing your asking for is extremly difficult to achieve, mostly due to compatibility issues. You could use CSS3 multiple backgrounds, but i believe it is not supported well (it is in chrome + safari (webkit based)). The problem is that your images are a fixed size, and in a fixed location (next to ur content box). Because the browser see's "divs" as tangible objects, the scrollbars are becoming visible. What you need is to hide the overflow inside your align box. .bgalign { height: 100%; width: 100%; overflow: hidden; } *should* fix this, but the real question is why isnt this just a fixed background image, as the content box is a fixed size, as is the "wings" positions? MikeyB Hi, I hoping someone could help me out with this problem I have been having. I have a div based layout and the main content is 998px wide. However, I want to have a top to bottom gradient (which I have a 1px wide image repeating), and I want to have two images coming of the side of the main content. However when I put those images in a div and positioned them where I wanted them to be, I realized that they would force a scrollbar. But, for some reason now (as you can see in the pictures) the left image doesn't force a scroll bar, but the right image does. I am sure there is probably a better way to do this, but I don't have very much website experience. I have included examples, and some of my css/html code. Let me know if you need anything else. Any help would be greatly appreciated. Thanks. http://imgur.com/KQfc1.jpg http://imgur.com/UiQ4H.jpg .bg { position: absolute; left: 50%; } .bgalign { height: 100%; width: 100%; } .innerbg1 { position: relative; left: -640px; } .innerbg2 { position: relative; left: 408px; } .leaf1 { float: left; height: 345px; width: 234px; top: 513px; position: absolute; background-image: url(images/leaf1.png); } .leaf2 { height: 355px; width: 234px; position: absolute; top: 610px; background-image: url(images/leaf2.png); <body> <div class="bg"> <div class="bgalign"> <div class="innerbg1"><div class="leaf1"></div></div> <div class="innerbg2"><div class="leaf2"></div></div> </div> </div> //content is down here
Create an account or sign in to comment