eZ Community » Forums » Setup & design » CSS Backgrounds
expandshrink

CSS Backgrounds

CSS Backgrounds

Wednesday 28 November 2007 5:38:20 pm - 7 replies

Can anyone tell me how to add CSS background images to a custom div class.

I know how to do it in CSS but I don't know how to do it through eZp

Any help would be appreciated happy.gif Emoticon

Thursday 29 November 2007 8:02:20 am

Hi Andy

Do you mean that you want to add an inline CSS declaration to the custom tag template?

Something like:

<div style="background-image: url ({"images/myimage.jpg"|ezdesign} )">

should do it - but personally I'd be putting it in your stylesheet.

Thursday 29 November 2007 2:02:34 pm

It's probably easier to show you what i mean...

Here is my eZp 4.0beta website (currently being populated and developed)

http://www.streetracersuk.com/

I want to use the "Welcome" image as a background image and have a styled text div over the top. Ordinarily I'd do it as CSS styles in a stylesheet.

What I'm asking is how do I apply a CSS style using the eZp admin?

Thursday 29 November 2007 3:15:27 pm

eZ Publish does not let you define inline style in the content, this is because it seperates the content from style / design.

So in this case you can:
1: Define a class for the tag you want to style (look in content.ini for how to set up classes pr tag, for instance [paragraph] aka <p> in html )
2. Use <literal class="html"></literal> tag, this will allow you to put anything inside that tag.
But you need to enable it first in content.ini under [literal], it is disabled by default for security reasons (so be sure you only let trusted people edit any class with xmlBlock datatypes after you enable this)

Thursday 29 November 2007 5:12:23 pm

Thanks guys. So let me get this right.

Once I enable HTML i can use inline styles within a literal tag

eg:

<literal class="html">
     <div style="background-image: url(images/image.bg); background-repeat:no-repeat;background-color:#000000;width:300px;height:450px;">
        <div style="font-family:tahoma;font-size:1em;color:#ffffff;padding:30px 10px 10px 10px;">
            Just a bit of text
         </div>
     </div>
</literal>

Would that work?

Thursday 29 November 2007 7:38:39 pm

No. but that is because you use relative urls in the background image.
If this is on page:
http://ezsite.com/aboutus/thispage
then your browser would think the image is here:
http://ezsite.com/aboutus/thispage/images/image.gif

So you need to set it to something like this (depending on where you place the image of course):
url('/design/my_design/images/image.gif')

Friday 30 November 2007 1:25:36 am

Ok so it has to be something like...

<literal class="html">      <div style="background-image: url(http://www.streetracersuk.com/var/ezwebin_site/storage/images/media/images/welcome/960-1-eng-GB/Welcome.jpg); background-repeat:no-repeat;background-color:#000000;width:621px;height:120px;">         <div style="font-family:tahoma;font-size:1em;color:#ffffff;padding:30px 10px 10px 10px;">This is Street Racers UK. An indepedant webzine about car modifying and the surrounding culture.         </div>      </div>  </literal>

I think I'm doing something wrong enabling html in the content.ini through the admin because it comes up with this error...

Center column: Class 'html' is not allowed for element <literal> (check content.ini).

What do I type in the box to make it change?

Tuesday 04 December 2007 10:05:35 pm

Found it, Fixed it, Done it happy.gif Emoticon

www.streetracersuk.com

Still a few alignment tweaks to do but the idea is there. Thanks Andre & Paul, your help was much appreciated.

Modified on Tuesday 04 December 2007 10:06:58 pm by Andy Boston

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from