Is this possible with CSS (or any other method)

• 

  neeklus · Member · May 22, 2013 at 2:40 pm

  • Copy link
  • Add topic to favorites

  Quick query:

  On my site, I want the slightly off-white space behind my blog content to either become invisible/deactivated or reduced in width so the background image is visible on smaller monitors. Is this at all possible, and if so, via CSS or any other method?

  Website is photographerfilm.wordpress.com

  Another off-topic question (as I’ve not upgraded to premium yet), does the premium upgrade apply to my entire account or just one wordpress website?

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 22, 2013 at 7:28 pm

  • Copy link

  You can add this to your custom CSS to get rid of the white background behind the content, but on your main page, the image you have loaded has a white background. You will have to edit that image and save it as a PNG or GIF with a transparent background.

  .hentry {
  background: none;
  }

• 

  thesacredpath · Member · May 22, 2013 at 7:30 pm

  • Copy link

  Sorry, I forgot my code tags. Copy and paste this instead:

  .hentry {
  background: none;
  }

• 

  designsimply · Member · May 22, 2013 at 8:54 pm

  • Copy link

  To change the design entirely for smaller screens only (without affecting the larger view), you should look into using media queries. Here is a basic intro:
  http://www.peachpit.com/articles/article.aspx?p=1604236&seqNum=2

  And here is something a little more in-depth:
  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

  does the premium upgrade apply to my entire account or just one wordpress website?

  WordPress.com upgrades are per website.

• 

  neeklus · Member · May 22, 2013 at 9:08 pm

  • Copy link

  Thanks for the responses.

  thesacredpath – the main image I am not too fussed about obscuring the background image, I’m just wanting the “2nd background” (is there an actual name for this space?) made entirely invisible.

  An alternative possibility would be reducing the width of that 2nd background too. Is this possible, and if so how?

  designsimply – Thanks for the answers. I’m very new to WP and CSS so the media queries will take some absorbing.

  Thanks again

• 

  designsimply · Member · May 28, 2013 at 3:15 pm

  • Copy link

  An alternative possibility would be reducing the width of that 2nd background too. Is this possible, and if so how?

  I think by “2nd background,” you mean the main content area background for the element with id=”page”

  This will remove it:

  #page {
       background: none;
  }

  This will make the entire width of the container element (#page) smaller:

  #page {
       width: 960px;
  }

  Be careful changing the width and be sure to consider the various different screen sizes other people will be using (i.e. from small laptop screens up to very large monitors).

  designsimply – Thanks for the answers. I’m very new to WP and CSS so the media queries will take some absorbing.

  Welcome! I hope you enjoy learning CSS!!