Twenty Eleven background image doesn't resize with browser (4 posts)

  1. webmakerholly
    Posted 4 years ago #

    I'm using Twenty Eleven (child theme) and my background image doesn't resize with the browser. It looks terrible on iPhone It seems to fall apart at anything smaller than 1060 px wide. Any suggestions? The site is at http://keystonecruise.com/wordpress/

    Thanks in advance!

  2. peredur
    Posted 4 years ago #

    The problem appears to be associated with the fact that the background image is associated both with the body and with the #access div. As the width of the page is reduced these two background images reduce.

    The top background image also causes a problem because it is a fixed width whereas everything else resizes to 100%, whatever that happens to be in the context. The #page div has a max-width of 1000px, so it resizes when the width available is less than that.

    The image no longer centers below a given width, because although it has auto margins, it has no fixed width.

    So you have a whole raft of reasons why the page behaves as it does. Which makes it very hard to fix. The only suggestion I have is that you try to convert everything to fixed widths, centered, with only the body background image if at all possible.



  3. webmakerholly
    Posted 4 years ago #

    Thanks for your reply PAE. However, now I'm more confused... is it better to have everything a fixed width or set to 100%? You said my top background image is a fixed width (I'm assuming you mean the one in the #access) but when I look at my css, it says it's set as 100%.

    Also, I tried removing the bg image from #access completely and it turns black.

    If you can please be more specific, I would really appreciate it.

    Thanks again!

  4. peredur
    Posted 4 years ago #

    No. I didn't say the image was a fixed width (although it is, by definition), but that it is associated with various <div>s, some of which have a fixed width and some of which have a percentage width. What's more, some have a max-width which means they are fixed width at that width or above, but variable below that width -- in standards compliant browsers.

    As I said, the only solution I can see is to convert the widths of all the divs concerned to be fixed (px) widths. This will cure the problem you have (I think) but make horizontal scroll bars appear whenever the viewport is less than the number of pixels you specify as the width.

    As to which is better, the answer is, it depends...


    You have to make a judgment as to whether the removal of fluidity is preferable to the possible breakage of the layout in some circumstances. I guess it is, if you think those circumstances are going to arise frequently.



Topic Closed

This topic has been closed to new replies.

About this Topic