Re: Header image not fitting on site
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
