Just cant get different background images on different pages :-(

HTML & CSS
1

Hi from beautiful sunset out of the window York UK,

I want to get different back ground images on different pages. My attempts to add classes on the body tag have resulted in one big epic fail.

Below illustrates the pain:

1294Ɨ801 718 KB

Any insights welcome :slight_smile:

2

Hi, David.

It would be far more helpful if you would post a link to the working site instead of building a codepen which we cannot easily duplicate on our computers.

The CSS class in your screen shot, .sandburn-wedding, looks like it is assigned to the <html> tag. Is that true?

If it is supposed to be attached to the <body> tag, it should follow it:

<body class="sandburn-wedding">

and the CSS might be

body.sandburn-wedding {}

 

This line of HTML

<div class="gridContainer.clearfix">

looks like it should have been written with a space between the classnames

<div class="gridContainer clearfix">

The dot connector is used in CSS to specify the selector where both classes exist in the HTML.

1 Like
3

HI Ron Pat, thanks for your reply. Ok if i could work through some of your pointsā€¦

1.ā€œfar more helpful if you would post a link to the working site instead of building a codepenā€¦ā€ OK I agree butā€¦ if I was to do this how would I be able to host it in ā€œtestā€ environment if that makes sense. The site Iā€™m building now will replace the live wordpress site www.davidclick.com (please no one jump on the ā€œwhy get rid of wordpress?ā€ my mind id made up)

  1. The <body class="sandburn-wedding"> does make sense but my site body tag looks like this:
    <body onLoad="MM_preloadImages('images/york-marriott-wedding-500-500.jpg')">

I am worried if I re write it the ā€œMM_preloadā€¦ā€ bit will be knocked out causing other problems. So ius the idea it is ok to write <body class="sandburn-wedding"> and the CSS might be body.sandburn-wedding {} and the MM bit on line 45 of the HTML codepen can be lost with the no impact on images downloading properly?

  1. looks like it should have been written with a space between the classnames
    <div class="gridContainer clearfix">. I tried this but it bust the layout so Ive kept it in.

Would be hugley gratefull if anyone coule geive me a fix to the problem of getting different background images on different pages :smile:
Thanks in advance,
David

4

@Nightwing: if you want inline code tags to show up, you need to type a backtick ` before and after the tag.

`<tag>`
5

Hah yes I was wondering how to do that :slight_smile: Now to find a back tick on my mac keyboard! <h1>Found it!</h1>

1 Like
6

looks like I may have carcked the different bk ground images on different pages problemo thanks to your help :smile:

OK but one minor questionā€¦
Line 46 in the HTML ā€˜onLoad="MM_preloadImageā€™ Iā€™ll be honest I cant remember why I needed to put this in, think it was as suggestion from a sitepoint member to fix on hover images not appearing. Can any one reassure me I havent screwed this up by tweaking line 46?

Grazie mille :slight_smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.