Different Background Image on Each Page

[kateolynch]

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!

[ramseyp]

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.

---

Community • Work • Conversations

[David Chu]

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:

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

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

[kateolynch]

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

[ramseyp]

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.

---

Community • Work • Conversations

[kateolynch]

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/

[ramseyp]

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' )";
)

---

Community • Work • Conversations

[kateolynch]

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!

[Gary Jones]

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.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[kateolynch]

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

[Author]

Posts