@brianowens
What theme are you using?
Could you post a link?
I’m using the standard theme that comes with buddypress. its at http://www.illuminationsculturalexperiences.com
@brianowens
This is the header image I see on my laptop PC. Same image whether running Firefox, IE or Chrome. Is it the correct image?
http://i51.tinypic.com/35b5o5u.jpg
yeah that is right, it just shows up different in other browsers for some reason.
The layout of default is a fluid one, the image is going to look diffrent on various browsers depending on their width and screen resolutions.
The instruction to set an image with a width of 1250px is not an indication the image will be fine, an image of that width will only display fully if your browser has at least 1338px width, start to narrow the browser width and the element being asked to hold the background also has to reduce in width thus clipping the background.
Creating graphics and placing them appropriately for fluid layouts is actually a lot harder than it appears.
The method that would ordinarily be used would be to divide the graphics in to two separate slices, the right hand stripes portion would be it’s own graphic this would be placed as a background to an inner element to the main one holding the other graphic, the new element would be left to simply run full width of it’s parent i.e default natural behavior of a block level element the red stripes would then be set as a background to this new element but placed at 100% on the y-axis i.e all the way to the right.
Now what occurs is that the right hand graphic moves independently of the left it will sit to the right hand edge of the header. Drawback to this is that you have to be aware of what has been set as a min-width for the layout if this value is too small it will allow the graphic to move too far together and overlap; min-width need to be sufficient to keep the two images reasonably separate.
I’m afraid that the bp-default theme is not really geared up to handle a graphic of the type you have made, with it’s principle resting on clipping the header image at smaller width thus requiring an image type that still makes sense if pert of it is hidden.
Another solution is to set the bp-default layout to a suitable fixed width and match your header graphic to that width, then the issue doesn’t occur.
Failing all that your last option is to move the stripes to the left by the amount that is appropriate at the layout min-width for it to show fully, now when you expand the browser you will eventually arrive at a blank area where the stripes run out /end so you will need to run the graphic on from the point where the stripes meet the bottom of the header or height, so for ~100px or so you need to continue the graphic albeit it clipped to top and bottom in your graphics software
Thanks for the advice. Could you tell me how to set the bp-default layout to a suitable fixed width? If not, could you recommend another theme that’s similiar that would work?
Off the top of my head locate the min / max widths and replace them with width:960px or larger if you really wish. Child theme approach is best as then you can move a copy of the bp default css to your own folder to work on , problem is that min/max properties are a nuisance as they can’t be unset as such, once stated you are stuck with the damned things ‘auto’ is not a value for min/max nor is re-setting them to ‘0’ so the original property decs need to be removed really.
