16 replies [Last post]
VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

Hey, I'm relatively new to CSS and for my job I was given a large CSS file and asked to randomize one of the background images in it. I've been scouring the web for a way to do this, and finally got some advice.

Basically what I did was create a test file with the suffix .css.asp and in it put ASP code to randomize the image plus some css code to test it. Then I just called the file as an include from another .asp file and it worked! Here is the code:

<%@ Language="VBScript" %>
<% Option Explicit %>
<%
Function cssImageLocation
Dim location
Randomize
location = "images/test/" & INT((7)*RND()) & ".jpg"
location = "http://dev.careercenter.uiuc.edu/" & location
cssImageLocation = location
End Function
%>
body
{
font-size: 40px;
font-family: "Arial";
color: #000000;
background-color: #FFFFFF;
background-image: url("<% = cssImageLocation %>");
} 

However, when I went to apply this to my existing .css file the .css was broken! It seems like as soon as I change the suffix of the .css file to .css.asp the css no longer works. Not only do I NOT get the image randomization, I basically get nothing, just a list of the HTML content. Does anyone have any idea why this might be happening?? Thanks in advance!

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 16 years 25 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

ASP Code Within CSS?

I can't say why that's happening, but from what I know of the structure of things I'd suggest this tack:

the page that has the "randomized background" would need to be an ASP page. When it's called it could send the HTML/CSS to standard-output (i.e. the client) and a part of it's function would be to "randomly" select the background elements in the CSS portion.

Am I making sense? I'm not a coder but I used to play one on TV...

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 50 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

ASP Code Within CSS?

Not too sure about trying to include asp code
<% = cssImageLocation %>
into the css code...

I got the same results as you regarding the html output on the page.
I was however able to get it to work (although not as a body bg image) by doing this:

randomimage.asp page

<%
'put your cssImageLocation function here
%>
<img src="<%=cssImageLocation%>" />

and then calling the randominage.asp page from another asp page
<div class="randomimage">
<!--#include file="randomimage.asp"-->
</div>

Don't know if that will help you any or not, but your post helped me get rid of a javascript random image code that I was using... got rid of about 30 lines of javascript and replaced it with your asp code
Thanks

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

The problem is that the website I'm working on relies on a large .css file which is used by all the pages to handle the formatting. Because of this, I can't just "make the page with the random background" into an ASP page. The randomization has to actually occur within the CSS so that when a page calls the css file a random image is produced. I'll post the actual CSS file tomorrow when I'm at work again,but it seems like the should be a way to do this right?

I'm still not sure why the code works in the example I provided, but not when I apply it to a larger .css file....

Anonymous
Anonymous's picture
Guru

Re: ASP Code Within CSS?

Why not do it like this in the .asp page, not the css:

<%@ Language="VBScript" %>
<% Option Explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The page</title>
<link rel="stylesheet" href="c/yourcss.css" type="text/css" media="all" />
</head>
<%
Function cssImageLocation
Dim location
Randomize
location = "images/test/" & INT((7)*RND()) & ".jpg"
location = "http://dev.careercenter.uiuc.edu/" & location
cssImageLocation = location
End Function
%>
<body style="background: url("<% = cssImageLocation %>");">

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 50 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

ASP Code Within CSS?

Triumph's way will work just fine... or you could create an asp page that has the randomized background and do an include of that page.

Anonymous
Anonymous's picture
Guru

ASP Code Within CSS?

rmfred wrote:
Triumph's way will work just fine... or you could create an asp page that has the randomized background and do an include of that page.
I think I said the same thing that you said. Laughing out loud I missed your post all together.

Anyway...this may be a better plan: http://www.alistapart.com/articles/randomizer/

It works like this:

body {
			background: url(../rotate.php);
		}

Then you put all the images in a folder that you specify in the php file.
Smile

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 12 years 36 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

ASP Code Within CSS?

Triumph wrote:
Anyway...this may be a better plan: http://www.alistapart.com/articles/randomizer/

It works like this:

body {
			background: url(../rotate.php);
		}

Then you put all the images in a folder that you specify in the php file.
Smile
This is the better plan. It's by far the most elegant solution.

Antibland

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

antibland wrote:
Triumph wrote:
Anyway...this may be a better plan: http://www.alistapart.com/articles/randomizer/

It works like this:

body {
			background: url(../rotate.php);
		}

Then you put all the images in a folder that you specify in the php file.
Smile
This is the better plan. It's by far the most elegant solution.

Antibland

I've read that article and I swear I tried that method. It seemed to be the easiest. I want to be clear that PHP isn't an option, only ASP. I know this shouldn't be an issue here, but I just want that to be clear.

I want to actually get you guys the css code though, because its not the body background image I'm rotating, its an image specified as the background of a specific div. I'm not sure if this makes a difference though...once again I'm pretty new to css. I'll post the css file tomorrow.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 50 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

ASP Code Within CSS?

Quote:
, because its not the body background image I'm rotating, its an image specified as the background of a specific div.

Well the concept should be the same... so try Triumph's suggestion
something like
<div id="yourdiv" style="background: url("<% = cssImageLocation %>");">

or... we could try to convert the php code from a listapart into asp

Anonymous
Anonymous's picture
Guru

ASP Code Within CSS?

rmfred wrote:
we could try to convert the php code from a listapart into asp
I haven't done ASP for about 6 years. I'd really have to brush up to be of any help. php can run along side of asp can it not?

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

I'm not even sure it's legal to call the .asp file from the .css rather than an image file. Can we create a quick test of this? Because when I tried this I had an .asp file that would produce random images, but when I called it from the .css I got nothing.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ASP Code Within CSS?

If rmfred/Triumphs suggestions for whatever reason aren't possible and you do have to work from the css file and if it is possible to run php alongside asp then there is a method of running php code in a css file which has an extension .php and to still allow it to be read as css by adding this code to the top of the stylesheet:

<?php  
header('Content-type: text/css');  
?>

and although I know nothing about asp would have thought it possible to do the same somehow?

Just thought I'd add that to the melting pot, may be of no use Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

ASP Code Within CSS?

VP. wrote:
I'm not even sure it's legal to call the .asp file from the .css rather than an image file.
If it returns the path to an image file I don't see why it wouldn't work. It is simply a URI and not the actual image file.

I don't have a running .asp server anymore or I would try it out for you. I know the php solution I posted works under the css as I have tested it. Since it works in php I don't see why it wouldn't work for ASP.

May I ask why php is not an option? Just wondering. Smile

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

Quote:
May I ask why php is not an option? Just wondering. Smile

Heh, because our server doesn't use PHP. It's all ASP/Access right now and we're transitioning to .NET

I wish it was PHP because I can test PHP at home and I'm more familiar with PHP. No ASP server here either Sad

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

Alright well here is the part of the css I'm trying to have a random background in...

DIV#content-col-2 {
  MARGIN: 0;
  PADDING: 0.25em;
  PADDING-TOP: 220px; 
  Padding-bottom: 1em;
  Padding-right: 1em;
  FLOAT: right; 
  WIDTH: 40%; 
  COLOR: black; 
  BACKGROUND-IMAGE:  url(../images/alma_medium.jpg); 
  BACKGROUND-REPEAT: no-repeat; 
  BACKGROUND-COLOR: white;
  BACKGROUND-POSITION: 20px 35px; 
}

So from my understanding I should be able to make an .asp file that reads

<%
Function cssImageLocation
Dim location
Randomize
location = "images/test/" & INT((7)*RND()) & ".jpg"
location = "http://dev.careercenter.uiuc.edu/" & location
cssImageLocation = location
End Function
%>
<body style="background: url("<% = cssImageLocation %>");"> 

and then replace the line calling the image with

background: url(../rotate.php);

Does this seem right?

EDIT: It doesn't seem to be working. I'm not sure about this line in the .asp code:

<body style="background: url("<% = cssImageLocation %>");"> 

VP.
Offline
newbie
Last seen: 16 years 23 weeks ago
Timezone: GMT-5
Joined: 2005-04-12
Posts: 7
Points: 0

ASP Code Within CSS?

So...no one has any more input on this? REALLY need some help here!