Need help? Check out our Support site, then


Background image resizes along with browser

  1. ilivebytheriverblog
    Member

    Hi,

    I have been trying to get http://ilivebytheriverblog.wordpress.com to look the way I want but one thing is bugging me: when I resize the browser window or zoom in and out, the background image changes with respect to the main body of the blog. It also looks different in other browsers (I use Firefox) and doesn't look right on tablets etc.

    At the moment I haven't paid to have access to the CSS sheets, although I have a very basic idea of CSS and have used it to do a few other minor things to the site etc.

    Is there something I can do?

    The blog I need help with is ilivebytheriverblog.wordpress.com.

  2. The Twenty Eleven theme is responsive, so it has slightly different CSS for different screen sizes based on break points (i.e. 800px, 650px, etc.). They are added using media queries (which start with @media in the CSS). You can see them near the bottom of the stylesheet if you look at the one for Twenty Eleven. Here is a link:
    https://s1.wp.com/wp-content/themes/pub/twentyeleven/style.css?m=1354677609g&minify=false

    So, if you wanted to target a smaller screen size, you may need to add a new @media rule with the background image rule you want inside it. Here's a basic example:

    @media (max-width: 650px) {
        p {
            color: red;
        }
        [ put your CSS rules here ]
    }

Topic Closed

This topic has been closed to new replies.

About this Topic