setting a background image in a difficult theme

I designed a header for this site that merges into a background picture.

The theme I am using does not have a way to set a background image.

I tried a few plugins to set the background and none of them worked.

Then I tried hiring a developer - and to my surprise he said that different screen resolutions would make the background not match up with the header.
This does not make sense to me as I would have thought the header would be stretched equally with the background at different resolutions - no?

I have attached the header image, the background image, and a mock up of what it should look like.

All I need to know is how to set this background image to centre on the page and scale appropriately with whatever resolution it is viewed at.

Please help -
Dan V

  • aecnu

    Greetings Dan V :slight_smile:

    sir from past developing experience I can assure you this will be a tough job unless a few things are done to make it work though the choice of back ground and header graphics are a critically determining factor.

    First with the Header - when you have a separate left and right part there will always be trouble when switching resolutions. Many use the left portion as a set image and the right side to be a repeat so when resolutions are changed the repeat is what stretch's. Unfortunately unknown to me is to how to make the center stretch to fit the different resolutions otherwise one is stuck using the repeating background on the right side.

    One other solution which is old school - is to make a different page for each resolution and a resolution detector that redirects to the correct resolution.

    Last but not least is the common practice of locking in the template size so even when the resolution changes the body of the page stays the same just showing more background image rather then stretching.

    To YOUR Success!

    Joe :slight_smile:

  • Narada

    Thanks Joe and Phil -
    Your replies seem contradictory and I am inclined to believe Joe who is more detailed about the potential problems.
    I would be happy to set the left side and simply have the right side be the dark blue color if that is a lot simpler?
    But I am afraid I am out of my depth here anyway.

    I think I will go back to the developer and see if he can freeze the size of the left background image so that it lines up with the header properly, and remove the light beam so that the rest of the background can be a single color.
    It sounds like someone who knows what they are doing should be able to do that fairly easily ?

    Thanks ~

  • Jason

    Why blank out the middle?

    IMO A full size background pic should be more dynamic than that because you could just use a single 1px wide x 1000 px tall pic of just the gradient and set the css to repeat-x, which would make the page load MUCH faster. And then the little starburst glyph could just be a regular transparent png "floated right" on left of the header.

    Seems much easier IMO, and no plugin required, but I guess that would work for adding a background to ANY theme. If this is a specific theme, specific problem, I would just add it in.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.