WordPress.com Forums » Topic: Background image resizes along with browser

designsimply on "Background image resizes along with browser"

designsimply — Thu, 06 Dec 2012 19:33:48 +0000

Here are some guides and examples about media queries if you're interested:

http://www.binvisions.com/tutorials/css3-media-query-tutorial-introduction/

http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/

designsimply on "Background image resizes along with browser"

designsimply — Thu, 06 Dec 2012 19:30:21 +0000

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 ]
}

ilivebytheriverblog on "Background image resizes along with browser"

ilivebytheriverblog — Tue, 13 Nov 2012 11:24:12 +0000

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?