custom background collage tiling issues

  • RossB

    (@rossb)


    12 years, 10 months ago

    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/

    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

    (@esmi)

    12 years, 10 months ago

    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

    (@rossb)

    12 years, 10 months ago

    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

    (@swansonphotos)

    12 years, 10 months ago

    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

    You can also have CSS in the theme for other @media sizes…you could add specialized background image for those and include background-size

    http://www.w3schools.com/CSSref/css3_pr_background-size.asp

    Thread Starter RossB

    (@rossb)

    12 years, 10 months ago

    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.