• Hi,
    I have searched these forums but can’t seem to find how to size a background image in Twenty Eleven so that it doesn’t have to tile…thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Not sure I understand the question. A background to what? The body? The main content area? Something else?

    If it’s the body, you can never guarantee it won’t ever have to tile, short of specifying no-repeat (or repeat-x or repeat-y as appropriate) in your css of course, because you can’t account for every possible viewport size that exists or will ever exist.

    If you’re putting a background into a region with a fixed width, you can make your image that width and so it won’t tile along the x-axis. But heights are usually determined by the content, so you’ll still need to tile along the y-axis or specify background-repeat: repeat-x to suppress vertical tiling.

    The only way you can guarantee to have an image fit is if you know in advance the size of the width and height of the region. This is very rare in Web pages.

    And remember that large images take a long time to load, I suppose I should say.

    (Usual advice about using a child theme and not altering the parent – if you’re not already doing so. Using a child theme is essential for any of the default themes, like twentyeleven, which you should never alter.)

    Cheers

    PAE

    Thread Starter Blackwood

    (@tmerr)

    Thank you PAE. I was asking about the background to the body. I now realize though, due to your excellent explanation, that I probably don’t want one large image for many reasons. Just out of curiosity though, if I wanted an image for the main content area, how I would achieve that in Twenty Eleven? I do have a child them, learned that one the hard way with Twenty Ten 🙂

    if I wanted an image for the main content area, how I would achieve that in Twenty Eleven?

    You’ve got a few choices depending on exactly where you want the image:

    • #wrapper contains the header, content and footer
    • #main contains just the content

    The most likely is that you’d use #wrapper, I think, but you’d probably have to do something to make sure the image didn’t show throw the header. Probably give the header itself a background of a white rectangle repeating in both directions, that would overlay the #wrapper image.

    I do have a child them, learned that one the hard way with Twenty Ten 🙂

    Quite 🙂

    That’s why I, boringly, mention it in nearly every post.

    Cheers

    PAE

    Thread Starter Blackwood

    (@tmerr)

    Thank you PAE 🙂 One question: where would I put the #wrapper / #main code?

    I just looked. In twentyeleven, the main blocks are the body (obviously) and #page. Just use firebug to investigate the HTML/CSS, and create suitable CSS rules to do what you want.

    If you don’t know how to do that, you need to ask on a specialist CSS list or forum. You can get the basics about CSS/HTML from w3schools.

    If you’re using twentyeleven you *must* use a child theme because it’s a default theme.

    HTH

    PAE

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Size of background image in Twenty Eleven’ is closed to new replies.