Title: custom background collage tiling issues
Last modified: August 21, 2016

---

# custom background collage tiling issues

 *  [RossB](https://wordpress.org/support/users/rossb/)
 * (@rossb)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/)
 * I have just created a collage in Photoshop that I want to use as a custom background
   on one of the pages in my site (Twenty Twelve, child theme).
 * The collage is not finished – just thrown together initially to get a general
   idea of what it would look like as a background.
 * I am viewing the site on a 22inch monitor screen. I designed the background in
   Photoshop to have a collage of images down either side, separated by a blank 
   section in between (this being where the page content will be). However, on installing
   the background on my site page and viewing it on a 22inch monitor, while the 
   images appear as planned down the left side, the images on the right side are
   partly obscured by the content column and the left side images then appear immediately
   adjacent. Easiest to just view the page (but what I’m talking about will only
   be apparent if you’re viewing with a 22inch monitor or larger):
 * [http://ppredesign.perthpunk.com/lloyds-perth-punk-memoirs/](http://ppredesign.perthpunk.com/lloyds-perth-punk-memoirs/)
 * 1. Just wondering how I could prevent the left side images tiling horizontally
   next to the right side ones? Ideally, I would like the left images to only appear
   on the left edge, and only the right ones down the right edge.
 * 2. Re background load time:
    a) I’ve got the background of the Photoshop document
   set to white. Would the custom background load time be reduced if I made the 
   document background transparent, instead of white? (I was also hoping that leaving
   a blank ‘content’ area in between the two collages on the left and right edges
   of the document might reduce load time of the background on the WordPress page,
   but suspect I’m being simple-minded about that). b) Would load time be reduced
   if I made the images black and white, instead of colour? What about if I made
   some black and white and some colour? Or does it simply depend on the dpi of 
   the saved document (72dpi at present)?
 * Please note: I have assigned the background to this specific page using the following
   CSS code in the stylesheet (ie: it is not the background on the home page):
 * body.page-id-631 {
    background: url(“/wp-content/uploads/2013/06/Lloyd-Memoirs-
   background.jpg”) !important; }
 * Cheers
    Ross

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/#post-3871626)
 * 1. You need to split the image into two (right & left) and add one image as the
   background on the `body` tag with the other added as a background on the `html`
   tag.
 * 2. It would be significantly reduced if you used the suggestion I gave in (1).
 *  Thread Starter [RossB](https://wordpress.org/support/users/rossb/)
 * (@rossb)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/#post-3871631)
 * Thanks for your very prompt response, esmi, but I’m not very tech-savvy – you’ve
   lost me (sorry!).
 * Would u mind elaborating on what you mean by split the image into right and left?
   Is this something I should do in Photoshop? If so, what’s the action called, 
   pls (so I can google it or whatever, rather than dogging you for details)?
 * I don’t understand what you mean by add one image as the background on the body
   tag and the other as a background on the html tag. Could u possibly give me an
   example that I could try to replicate, pls?
 * Cheers
    Ross
 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/#post-3871651)
 * You could create an image that is 1920 wide (and your desired height, let’s use
   1024)
 * In that put the images your desire on the left side. The width of these is ~(
   1920-total page width)/2. Do the same for the right side. The image size should
   not be affected by the chosen color for the center section.
 * Also, no need to use the theme background settings, just add your CSS:
 *     ```
       body {
       background-color: #ff1111;
       background-image: url('http://ppredesign.perthpunk.com/wp-content/uploads/2013/06/Lloyd-Memoirs-background.jpg');
       background-repeat: repeat-y;
       background-position: top center;
       background-attachment: fixed;
       }
       ```
   
 * Play with above a bit:
 * [http://www.w3schools.com/CSSref/css3_pr_background.asp](http://www.w3schools.com/CSSref/css3_pr_background.asp)
 * You can also have CSS in the theme for other [@media](https://wordpress.org/support/users/media/)
   sizes…you could add specialized background image for those and include background-
   size
 * [http://www.w3schools.com/CSSref/css3_pr_background-size.asp](http://www.w3schools.com/CSSref/css3_pr_background-size.asp)
 *  Thread Starter [RossB](https://wordpress.org/support/users/rossb/)
 * (@rossb)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/#post-3871767)
 * Hi Seacoast Web Design Member, and thanks for your response.
 * I couldn’t get your code to work (the page kept displaying the background from
   the home page), so messed around trying to make it specific to the page with 
   the background tiling issue. I found the following worked in restoring the current
   background, but made no difference to the tiling.
 * body.page-id-631 {
    background-color: #ff1111; background-image: url(“/wp-content/
   uploads/2013/06/Lloyd-Memoirs-background.jpg”) !important; background-repeat:
   repeat-y; background-position: top center; background-attachment: fixed; }
 * However, I haven’t yet tried creating an image according to your recommended 
   width and height specifications. Will get on to that as soon as I can find time
   and report back.
 * Cheers
    Ross

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘custom background collage tiling issues’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [RossB](https://wordpress.org/support/users/rossb/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/custom-background-collage-tiling-issues/#post-3871767)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics