Background image resizes along with browser
-
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)
-
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=falseSo, 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 ] } -
Here are some guides and examples about media queries if you’re interested:
http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/
- The topic ‘Background image resizes along with browser’ is closed to new replies.