[SOLVED] How to place background image on a static page

Shepherd Jim · #1 Nov 5, 2009, 12:15 AM

Frustrating! I know I know how to do this...

I'm trying to place a 300 px wide background image behind the text on just one specific static page of my test site. I've uploaded the image to

http://shepherdjim.com/wp/wp-content.../imagename.jpg

and can't get it to appear.

I'm using ATA 3.4.2 and WordPress 2.8.5.

http://shepherdjim.com

Jim

jim · #2 Nov 5, 2009, 12:52 AM

Hi that jim
Of the top of my head it seems like you could create a simple table http://forum.bytesforall.com/showthr...&highlight=jim and specify it to have a background image, I havent been there with an image, but it should be like coding it to have a background colour which would be.....<td bgcolor="??????">... so maybe it would be ....<td background=?????.jpg>
All the best.....this jim.

Shepherd Jim · #3 Nov 5, 2009, 06:39 AM

Hey Jim -- like that name!

Thanks, but no. I survived the "old days" when tables were used as THE way to arrange content on web pages. Modern, new and improved!!, web design dictates that tables be used only to present "tabular data" -- I always think of that as showing an Excel spreadsheet on your site.

I know I can assign a background image to an HTML "container" (e.g. body, div, span, etc) with CSS. And I could probably do it successfully in a straight HTML/CSS website. But, I'm having trouble figuring out how to insert what's necessary into the whole WordPress/Atahualpa conglomeration.

I'm glad to see that someone was up last night later than me!

Jim, ...Shepherd Jim
(thinking: "....Bond, ...James Bond")

juggledad · #4 Nov 5, 2009, 09:40 AM

see http://forum.bytesforall.com/showthr...ackground+page

Shepherd Jim · #5 Nov 5, 2009, 11:28 AM

Nope, not there yet.

Experimenting with two pages, I've put the following in the ATO CSS Inserts:

body.page-id-79 td.middle {
background: #414141;
}

body.page-id-11 td.middle {
background-image: url(/wp/wp-content/uploads/Yarn_LowWhor_300pxl.jpg);
background-repeat: no-repeat;
}

On my test site, "page-id-79" should be http://www.shepherdjim.com/info-comments

and "page-id-11" http://www.shepherdjim.com/fiber-tools/niddy-nods

and I'm not seeing anything new in the backrgounds of either page.

I've looked at the generated Page Source listing but I'm not clever enough to see what's not happening.

S'Jim

juggledad · #6 Nov 5, 2009, 12:24 PM

your CSS SELECTOR is messed up
use a '#' when refering to an ID= and a ',' when refering to a CLASS=
so you should have
body.page-id-79 td#middle {
background: #414141;
}

body.page-id-11 td#middle {
background-image: url(/wp/wp-content/uploads/Yarn_LowWhor_300pxl.jpg);
background-repeat: no-repeat;
}

Shepherd Jim · #7 Nov 5, 2009, 03:40 PM

Quote:

Originally Posted by juggledad

your CSS SELECTOR is messed up
use a '#' when refering to an ID= and a ',' when refering to a CLASS=
so you should have
body.page-id-79 td#middle {
background: #414141;
}

body.page-id-11 td#middle {
background-image: url(/wp/wp-content/uploads/Yarn_LowWhor_300pxl.jpg);
background-repeat: no-repeat;
}

Thanks! It's working ...now I'm playing with positioning -- so much to learn!

BUT, I do want to understand where it was that I'd gone wrong.

Flynn's post on the subject from a year ago that you cited read:

<body class="page page-id-21 page-template page-template-default logged-in">

Then use a CSS Insert, e.g

body.page-id-21 td.middle {
background: #414141;
}

I had thought I was following exactly what Flynn had suggested. The "page source" refs class="page...etc so I figured I was styling a class and should use a "." -- not a "#". I don't see where it's an "ID" requiring the "#".

Not to worry if my continuation of this topic is more than we need to cover here. Looking at the numbers of Forum visitors lately, betting you have your hands full! :-)

Thanks again! Atahualpa Rules!
S'Jim

juggledad · #8 Nov 5, 2009, 03:48 PM

I think Flynn made a typo, that's all (I think we should let him do that occasionally

)

Shepherd Jim · #9 Nov 5, 2009, 07:31 PM

You won't hear me arguing that point!

...and I am happy to learn that, for once, it wasn't me that was messing up!

Tnx again Paul!!