Different Background Image on Each Page

Community Forums Forums Design Tips and Tricks Different Background Image on Each Page

This topic is: resolved

This topic contains 9 replies, has 4 voices, and was last updated by  kateolynch 1 year, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #30457

    kateolynch
    Participant
    Post count: 10

    I am using the Executive theme and would like to give each page (excluding the home page) a background image only within the wrap (or container, sorry if my terminology is incorrect here), that the text can sit on top of.

    An example would be this page:

    http://lynchlawfirm.net/home/attorney-profile/

    I’d like to upload an image to sit behind it and for the image to be semi transparent.

    Can someone point me in the right direction to get started?

     

    Thanks in advance!

    #30500

    ramseyp
    Participant
    Post count: 99

    To do what you’re wanting will require custom code, especially if you want to constrain the background inside the #wrap div or another specific div. One approach is to use the featured image of the page as the source of the background image. You’d have to write a function that takes the image & places it in the page, styled appropriately.

    Another method is to use a custom field for the background image. This is helpful if the Featured Image is being used already for other purposes.

    If you wanted the body to have the background image (a full-screen background image), you could use a plugin like “Full Screen Background Images Plugin“. It’s not a free one, but it supports different background images for different pages / posts.


    #30502

    David Chu
    Participant
    Post count: 1395

    Hi,
    There are various ways to do this, but none that take 10 seconds.

    I would most likely use a CSS method. I would use the Custom Body Class on the page (down in the Layout Settings near the bottom of the Page). Then I would upload an image to the Genesis folder or just to the Media Library, and then write some CSS to connect the class to the image.

    #wrap is kind of everywhere on your site. So as an example I might write something like this after sticking a class of “jeffrey” on the body class for his page:

    [css]
    .jeffrey #content-sidebar-wrap {
    background: url(/wp-content/themes/executive/images/jeffrey.jpg) left top no-repeat;
    }[/css]

    So that’s one basic recipe you could follow, obviously adjusting for your set-up, and wherever you want the background to go.

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #30548

    kateolynch
    Participant
    Post count: 10

    Dave,

     

    That is exactly what I want to do!  It sounds simple enough, however it doesn’t seem to have worked…and I’m wondering what I might have done incorrectly.  I put the new CSS under Content and here is what I wrote:

    .jeffrey-content-sidebar-wrap #content {
    background: url(/wp-content/themes/executive/images/Jeffrey-S-Lynch-Attorney-Profile-Background.jpg) left top no-repeat;
    }

     

    again the site is: http://lynchlawfirm.net/home/attorney-profile/

    any ideas?

    thanks,

    Kate

    #30550

    ramseyp
    Participant
    Post count: 99

    Kate, try this CSS:

    .jeffrey-content-sidebar-wrap #content {
    background: url(images/Jeffrey-S-Lynch-Attorney-Profile-Background.jpg) no-repeat left top;
    }

    You don’t need /wp-content/themes/executive/ in there because of how the images directory and the style.css file are in the same parent directory. Also, I think no-repeat should come before “left top”, but I may be mistaken.


    #30999

    kateolynch
    Participant
    Post count: 10

    Finally made some good progress on this!

    Here is the code I used:

    body.jeffrey {
    background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
    }

    I placed it under the /***** Content ********************/section

    I cropped the image in Photoshop to get it the width I want, but now what I’m wondering is, how do I get this to sit in just the content section and not be flush to the right or to the left or sit behind the sidebar?

    Thanks in advance!

     

    http://lynchlawfirm.net/home/attorney-profile/

    #31005

    ramseyp
    Participant
    Post count: 99

    If you want the image just behind the #content div, you would change that line to read:

    body.jeffrey #content {
    background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
    }

    You can insure the image covers the whole space by using the background-size attribute (and for older IE browsers, there is a method for this that scales the image to fit the space on both width & height axes. Added to the CSS, it would look like this:

    body.jeffrey #content {
    background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
    background-size: auto 100%; /* the first value is the width, the second is height. Adjust them as needed */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' );
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' )";
    )


    #31009

    kateolynch
    Participant
    Post count: 10

    Thank you! That just about does it!  I apologize but I have one more question.

    The scale method works great, however it leaves a gap between the navigation and where the post starts.  Any thoughts on how to eliminate that? And could the image maybe  be a little further tot he left of the content to create a border? I realize the image is not sized correctly (something I will correct once I know I’ve got the placement down).

    Thanks again!

    #31022

    Gary Jones
    Moderator
    Post count: 693

    Change the margin on #inner to

    margin: 0 auto;

    to remove the top and bottom white gap.

    To give the text some breathing room within the background image, you can create:

    .jeffrey #content .page {
    padding: 15px 0 15px 15px;
    }

    Adjust the values to suit.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #31028

    kateolynch
    Participant
    Post count: 10

    Thank you, thank you everyone!  This was just the help I needed!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.