I would like to add a background image to my theme

• 

  misschrista13 · Member · Aug 10, 2013 at 8:33 pm

  • Copy link
  • Add topic to favorites

  I purchased the upgrade to customize my theme, “something fishy” thinking I would be able to change the background image but I can’t find an option to do that anywhere. Can you please help me with this?

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

• 

  rachelmcr · Member · Aug 12, 2013 at 1:47 pm

  • Copy link

  Hi there,

  Because of how the background in the Something Fishy theme works, there isn’t a built-in way to customize it. This is because the background is created out of many different elements to make it move as you scroll down the page.

  However, if you want to change it, you can do this with custom CSS. For example, this CSS code will remove the current background images and replace them will a solid beige background:

  #page {
  background: beige;
  }
  
  .sea-sprite, .parallax, .reeds-sprite {
  display: none;
  }
  
  #ocean-floor-background, #ocean-floor-background-2 {
  background: none;
  }

  If you have a background image uploaded to your blog’s media library, you could add that image by using this code instead of the first piece of code (with the beige background setting) from the code above:

  #page {
  background: url('PASTE_IMAGE_LINK_HERE');
  }

  Please let me know how that works for you!

  If you would like help making additional customizations to your theme, such as more advanced background settings, most of our CSS support is done in our community forums by both staff and volunteers:
  https://en.forums.wordpress.com/forum/css-customization

• 

  rachelmcr · Member · Aug 12, 2013 at 1:50 pm

  • Copy link

  I just realized I forgot to give you instructions for how to add this custom CSS to your blog. Sorry about that!

  To add custom CSS, go to Appearance > Customize in your dashboard and select CSS from the Customize tools. You can add the custom CSS code into the CSS editor there.

  You can also read more about editing CSS at WordPress.com here: Editing CSS

• 

  misschrista13 · Member · Aug 12, 2013 at 4:42 pm

  • Copy link

  Wow, thank you. I will try this out later today. Thanks a lot xo

• 

  misschrista13 · Member · Aug 12, 2013 at 8:35 pm

  • Copy link

  Okay, one more question then. How do I get the image to not tile. I would like to just stretch the image or tile vertically.

• 

  rachelmcr · Member · Aug 13, 2013 at 7:45 am

  • Copy link

  You have a couple options for resizing the image:

  1. You can set a background-repeat property to choose how (or if) it repeats. If you only want the image to tile vertically, you can use the value “repeat-y” like this:

  #page {
  background: url('PASTE_IMAGE_LINK_HERE');
  background-repeat: repeat-y;
  }

  You can read more about this property here: http://www.w3schools.com/cssref/pr_background-repeat.asp

  2. You can set a background-size property to stretch or resize the image. You can use the value “cover” to make the image stretch to cover the whole screen (some of the image may not fit on the screen), or you can use the values “100% 100%” to make the width and height match the screen exactly (this may distort the image). Here’s an example:

  #page {
  background: url('PASTE_IMAGE_LINK_HERE');
  background-size: cover;
  }

  You can read more about this property here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

  You can also ask questions and get CSS tips in the CSS Customization forum here: https://en.forums.wordpress.com/forum/css-customization

• 

  misschrista13 · Member · Aug 13, 2013 at 1:06 pm

  • Copy link

  You happiness engineers are the bees knees. xo

• 

  rachelmcr · Member · Aug 13, 2013 at 4:10 pm

  • Copy link

  I’m so glad this worked for you, and the customized background looks great on your site! :) Happy blogging!