Support » Themes and Templates » Background image (in content) not responsive in Twenty Twelve

  • 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.

  • The topic ‘Background image (in content) not responsive in Twenty Twelve’ is closed to new replies.