CSS background-image not displaying online

[Goz]

Can't get my head round this one...

I've created a variable to store the name of the image I want displayed as a background image to an element on a section page. This is so that the image can be different for each section.

I've got the following CSS code :

 
#section_label_boxes {
margin:-20px 0 0 0;
padding:0.2em 0.2em 0.2em 0.2em;
background-image:url('<actinic:variable name="LabelImageName" />');
background-repeat:no-repeat;
vertical-align:top;
}

and the HTML is simple

 
<div id="section_label_boxes">
<h1><actinic:variable name="SectionName" /></h1>
...
</div>

It looks fine in Actinic and also when I do a page or site preview.

However, when I upload to the web server the image is missing and the CSS comes out as

#section_label_boxes { 
margin:-20px 0 0 0; 
padding:0.2em 0.2em 0.2em 0.2em; 
background-image:url(''); 
background-repeat:no-repeat; 
vertical-align:top; 
}

The background-image file reference is empty.

I've tried it with the variable type set as text and as filename but both give this result. I've also tried it without quotes and with double quotes around the variable.

The images have been added to Additional Files and have been uploaded to the server.


See : http://www.aspak.co.uk/acatalog/Cardboard_Boxes.html - the image should go to the left and slightly above the section title.

Have I missed something or, more likely, done something silly? Anyone come across this before?

All suggestions gratefully accepted.

[NormanRouxel]

A weird one. I tried this and the variable doesn't show up in the stylesheet, just like you report.

Then I deleted the variable from my actinic.css, next deleted it from the library and tried creating it all again. This time it inexplicably worked!

[Goz]

Thanks Norman - I'll give that a go.

regards

Andy

[Goz]

....mmmm.... Actinic is not letting me delete the UDV. It'll let me delete all my other UDVs - just not that one!

[NormanRouxel]

It may be lurking inside a Layout. Try using the Find capability in Design / Library.

Also, I've seen weird UDV behaviour cured by switching it to another Tab, then back.

[Goz]

Thanks Norman - couldn't find it there - but I have found the answer. I had merely commented out the reference in the CSS. I've deleted it from the CSS now and have been able to delete the UDV.

Watch this space....

[Goz]

Bum. That didn't work for me - I'll have a rethink.

Thanks for your help Norman.

[TraceyG]

Hi,

I've had a go at this and can't recreate your problem. This is what I did:

- created a 'LabelImageName' variable - place of setting: 'Section' and 'Site', Type: Filename, Entered images into 'Top Level Value and Initial Value' fields

- put the CSS as onto the overall layout in the head as you want the image to be different on each page:

<style type="text/css">
	
#section_label_boxes {
margin:-20px 0 0 0;
padding:0.2em 0.2em 0.2em 0.2em;
background-image:url('<actinic:variable name="LabelImageName" />');
background-repeat:no-repeat;
vertical-align:top;
}
   </style>

- added the HTML as you have it

- set the image on one of my sections and uploaded the site and the images appeared (didn't have to add them into 'additional files').

Did you do something different?

[Rich Brady]

I've been trying too, but unsuccessful... Strange one this. Just for completenes I was using 9.01 IDWA

*Ponders* Why is this not on 9.02?

[leehack]

You are using sub folders and have the slash the wrong way round perhaps? Its a V9 bug.

[Goz]

Hi Tracey

a bit different....

• Place of setting for the UDV was section only - I didn't put it into site.
• What do you mean when you say you entered images into 'Top Level Value and Initial Value'? - I left those blank.
• I put the CSS into theme.css
• I included the files as additional files
• My HTML went into the inner layout because it is associated with the H1 section name tag. I'm not sure how I get it into the outer layer?

I'm using 9.0.2 IFZA

Lee - I'm using a subfolder for the images. When I browsed to select the file for a section, the slash was the wrong way round so it didn't display in Actinic or page preview until I'd changed the slash. Are you saying that I should leave the slash along and it will be OK when published to the web?

[Rich Brady]

The image is referenced is hard coded into the CSS, so I'm assuming it's something to do with how the Variable is set up.

I've been trying to get it to work using the Stylesheet though, not putting it in the head has Tracey has demonstrated.

[leehack]

Lee - I'm using a subfolder for the images. When I browsed to select the file for a section, the slash was the wrong way round so it didn't display in Actinic or page preview until I'd changed the slash. Are you saying that I should leave the slash along and it will be OK when published to the web?

I reported it on here to CD sometime ago Andy and can't recall full details, but from memory, when you referenced the image in actinic, the slash went wrong way and the preview did not work. However if you reversed it, the preview started to work and the live site did too. That's as i recall it anyway.

For background images in CSS, i think the only way forward is to have them in the root, Actinic seems to have trouble parsing in external sheets otherwise, especially it seems if you use actinic variables in your external sheets.

[TraceyG]

I put the CSS into theme.css

This is included into the actinic.css stylesheet and when generated there is only going to be one copy of it so which image for which section should it include? If you want it to have different images then you are going to have to put the CSS into the overall layout (isn't that call an 'inline' style or something?).

My HTML went into the inner layout because it is associated with the H1 section name tag. I'm not sure how I get it into the outer layer?

I think you've confused what I said there. The HTML is in the inner layout but the CSS goes in the outer layout

Place of setting for the UDV was section only - I didn't put it into site.
What do you mean when you say you entered images into 'Top Level Value and Initial Value'? - I left those blank

I did this so that it would be included in the 'Online Catalogue' level and then the initial value would be used as the default image so I only had to change one section with a different image to test it - it's not necessary.

[leehack]

Theme.css gets imported into actinic.css as i understand so backgrounds would be most likely overwritten in the body class in the main sheet. If you want differing ones, then as Tracey says add the declaration into the head area of your layout and have blockifs switching it on and off as required. All it does basically is load all the stylesheets and then loads the CSS directly in the html file which will of course overwrite anything (previously declared) you want it to.