Thread

I saw a post about this but the reply was not detailed enough for me to get to a solution.

I have a CSS file setup as a template. I understand that I need to pull this into my template… but how exactly?

The post mentioned use a path statement but what would be the full syntax for this.

I tried modifying

<link href=”/p7epm/epm50/p7EPM50.css”  rel=“stylesheet” type=“text/css” >

in various ways and just found lots of ways it doesn’t work.

Ideas?

Thanks

You can read all about it here: http://ellislab.com/expressionengine/user-guide/templates/globals/stylesheet.html

thanks, that gets me part of the way there.

It’s pulling in my stylesheet but it’s not parsing the tags.

I have a test.css that contains…

div.test {
width:200px;
height:20px;
background-color:#33FF00;
background-image:url({backgroundpic});
}

I have a <div class=“test”></div>

inside of a channel:entries tag.

It applies the style except it doesn’t parse: background-image:url({backgroundpic});

what am I missing?

Hi, fensterbaby. It doesn’t work that way, you’ll need to use the path to the variable backgroundpic. Just remember to path from the root.

I’m afraid I don’t know how to construct the path. Tried but it ain’t working.

Can you post a sample?

Thanks

Hi, fensterbaby.

Let’s take a look at your image file. Assume for the moment you store your images in a folder on your site called: images.

And your image is called background.jpg.

Your css setting would look like this:

div.test {
width:200px;
height:20px;
background-color:#33FF00;
background-image:url('/images/background.jpg');
}

Does that help?

No. I know how to hard code an image but that’s not what I want to do.

I’m trying to get the CSS to dynamically set the image depending on the found entry.

I’m wanting a fieldname in place of the filename.

more like..

background-image:url(’{myFieldName}’);

fensterbaby,

I’m afraid I don’t know how to construct the path. Tried but it ain’t working.

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=template_group/template_name}" />

Replace the path with your won template group and template name

I’m wanting a fieldname in place of the filename.

more like..

background-image:url(’{myFieldName}’);

You will need the exp:channel:entry tags around this for it to work.

It wouldn’t be the best way of doing things though

A better way to work would be to make a load of predetermined styles with your different background pics

Then dynamically change the class in your template. For example using the entry_id here. But you would use something else depending on what or how frequently you want to use the background image. This gives you great flexibility

{exp:channel:entries limit="1"}
<div class="test{entry_id}"></div>
{/exp:channel:entries}

div.test12 {
width:200px;
height:20px;
background-color:#33FF00;
background-image:url('/images/background.jpg');
}

Just to expand on what the others have said, if you wish to have EE tags parsed in your CSS, you need to call your CSS using path=.  See Using Tags and PHP in the stylesheet user guide page.

Hello

I’m having almost the same problem.
But I think the answer is about let the client choose a background, but I want to let the client upload the background.

Using ExpressionEngine v2.1.0 for the website.

I want to give the client the opportunitie to change the background (not choose but change).
That can be once a week or once a month or even every day that depends. So the background-image always has an other name.
So I created a channel for uploading background-images where my client can upload an image.
And I try to read the entry for the background.

In CSS I want to put:
body {
background-image:url({exp:channel:entries limit="1"}{background}{/exp:channel:entries});
}
or
body {
background-image:url({embed="site/BD_background_loader});
}
and
site/BD_background_loader:
{exp:channel:entries limit="1"}{background}{/exp:channel:entries}

I know this doesn’t work but I don’t know how to get it right.
Please help

Thanks

Hi, Franks.

You’d need to use inline CSS for this, and make sure your {background} field is set to use None as the Default Text Formatting for This Field.

Does that help?

Thanks but sorry,

Thanks but sorry,

I had found that I have to use inline CSS but I cann’t find exactly how to do that.
Something like this perhaps:

</head>
<body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0” style=“background: url({exp:channel:entries channel="xxx" limit=“1”}{background}{/exp:channel:entries});”>
</body>

And secondly how/where can I put a customfield (fieldtype=file, filetype=Image) set to use None as the Default Text Formatting?

Thanks

Hi,

I cann’t get it to work so I thought of something else: if I let my client upload an image always with the same name (pe background_photo.jpg). So I can refer to that picture. Not the nicest solution but oke.
But EE doesn’t remove images from the provider if you give the command to remove. So if you upload an image ‘background_photo.jpg’ EE renames it to ‘background_photo1.jpg’. So this is neither the solution.

In EE 1.6 I used File of Huot so you could change File Settings
Allow Multiple Uploads?  Yes   No
Show Thumbnails?  Yes   No
Clean Filenames?  Yes   No
Rewrite Filenames?  Yes   No
Resize Images  
Keep Originals?  Yes   No
Delete From Server?  Yes   No

What can I do please help with this or with my other question because I already had to deliver the website

Thanks

Hi Franka,

The bug where EE doesn’t prompt you to overwrite a file and instead silently renames it is fixed in the 2.1.4 beta.

In your code above, try adding dynamic=“no” to your channel:entries tag. Does that help?