Ready to get started?Download WordPress


Background image (in content) not responsive in Twenty Twelve (1 post)

  1. David Borrink
    Posted 10 months ago #

    I have a logo and large image in my body tag that fills the width of the body area on my site. I just discovered on a tablet that my image is not being responsive and is wider than the body area, being cut off on the ends on tablets. Yikes.

    Obviously I need to use a percentage on my CSS. But I'm not figuring how to do that. My CSS says:

    body .site {
        background: url("images/ampersand-logo-tagline-background.jpg")
        no-repeat scroll center top #FFFFFF;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        margin-bottom: 3.42857rem;
        margin-top: 0rem;
        padding: 0 2.85714rem;

    This basically acts as a combination header/background image and it includes a large faded ampersand in my page background. I've tried adding width call-outs like 75% but that's not working in the CSS. Do I need to set a callout like body background-img or something. I'm at a loss to know how to make my single large background image responsive like the rest of twenty twelve when it appears on a tablet.


You must log in to post.

About this Topic

  • RSS feed for this topic
  • Started 10 months ago by David Borrink
  • This topic is not resolved
  • WordPress version: 3.5.1