Background image resizes along with browser

• 

  ilivebytheriverblog · Member · Nov 13, 2012 at 11:24 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Dec 6, 2012 at 7:30 pm

  • Copy link

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

• 

  designsimply · Member · Dec 6, 2012 at 7:33 pm

  • Copy link

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

  Introduction to CSS3 Media Queries

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