Is there any CSS gurus on this forum (I need some help)

Ok this one is for any CSS gurus, I need some help with some CSS for a background image.

I have made a background image for my dolphin site (the main body background) This new image has another image in the left side, the total image is 1440 X 750px.

What I want is for the image in the left of the background to always be on the left I.E to never go under any of the content no matter what screen resolution a member is using, With my screen resolution 1440 X 900 the background image looks perfectly aligned this is how I want it to look with any reolution, but if I change my resolution the image in the left of the background goes under the page content.

How can I get it to be in exactly the same position on any resolution?

Here is my CSS so far

body {
 font-family:Verdana,Arial;
 font-size:11px;
 color:yellow;
 background: #a60c0c url(../images/back.jpg);
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: left top;
 width: 100%;  
 height: 100%; 
 margin:0px;
 padding:0 0 50px 0;   
}

I have googled for this but everything I could find used a div with an IMG tag inside the div then a bit of CSS however this totaly breaks the dolphin layout.

Any help please

I have attached my background image for you to see what it is like (please dont look if you are offended by glamourus images)

back.jpg · 244.5K · 60 views
Quote · 16 Sep 2011

The key to understanding why that is happening is understanding what happens at different resolutions.

For example. Your image size is 1440x750. and your CSS says to position it at top left. So the image will fit perfectly in a browser window set 1440x750. But in smaller resolutions such as 1024x768 even with the browser set at full screen you will not have enough space to fit the entire image.

Dolphins default is to center the page, and the default page width is 940px.

So at a resolution of 1440 wide, you will have margins of 245px on each side. At a resolution of 1024 wide you will have margins of 42px wide which means the image will end up under the page because there is simply not enough room for it.

Your CSS is telling it to position it at top left. And it is doing exactly that. It's just the amount of space available at lower resolutions just does not allow enough space on the left side to prevent it from showing under the page.

To achieve what you described is not possible through CSS alone. The code would have to be rewritten to force dolphin to change all of the page widths to make the room needed on the left side for each screen resolution.

https://www.deanbassett.com
Quote · 16 Sep 2011

Ok thanks.

I did notice though that dolphin does not seem to use a main wraper for its content to go into.

 would it change anything if all of dolphins content was inside a main wraper?

Quote · 16 Sep 2011
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.