[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1105
  • Last Modified:

using absolute paths in css files.

i have disorganized directories in my web project.

directory is like
www/myproject
........................./con.php
........................./index.php
........................./conf.php
........................./images/mainpage/1.jpg
........................./images/2.jpg
........................./css/style.css
........................./lib/functions.php
........................./lib/template/mainpage.php
........................./user/index.php
......................../admin/external/tech.php
----------------------------------------------------------------
in my style.css
#box{
      background-image:url(../images/mainpage/1.jpg);
}

#line{
      background-image:url(../images/2.jpg);
}

when i include this css file from /user/index.php it works fine but when i call this css from /admin/external/tech.php

is there any solution to make absolute paths for css files.
i want to make this
#box{
      background-image:url(/myproject/images/mainpage/1.jpg);
}

#line{
      background-image:url(/myproject/images/2.jpg);
}

i know how to do this in php files or in html via javascript. but i can not find any way to do this in css.

thanks.
0
phparmy
Asked:
phparmy
  • 2
  • 2
  • 2
  • +2
2 Solutions
 
FDMilwaukeeCommented:
to use an absolute path you have to define it the following way = http://www.mydomain.com/myproject/images/mainpage/1.jpg

if your site is secure using ssl your path would look like this = https://www.etc, etc, etc

hope that helps

FDM
0
 
hieloCommented:
>>i want to make this
#box{
      background-image:url(/myproject/images/mainpage/1.jpg);
}

#line{
      background-image:url(/myproject/images/2.jpg);
}

Get rid of "/myproject":


i want to make this
#box{
      background-image:url(/images/mainpage/1.jpg);
}

#line{
      background-image:url(/images/2.jpg);
}
0
 
thehagmanCommented:
As the syntax "url()" suggests, the part in bracket is a URL.
You may use relative URLSs ans in your example, i.e. url(foo1.jpg) or url(dir/foo2.jpg) or url(../foo3.jpg)
but also url(/absdir/foo4.jpg) and of course url(ftp://hostname/path/foo5.jpg)

Assuming your CSS file is retrieved as http://yourserver/something/cssdir/cssfile.css, the effect of the above examples is that the client will look for
http://yourserver/something/cssdir/foo1.jpg
http://yourserver/something/cssdir/dir/foo1.jpg
http://yourserver/something/foo3.jpg
http://yourserver/absdir/foo4.jpg
ftp://hostname/path/foo5.jpg

Relative path is always relative to the place where the containing file is, absolute path is from the webroot of the same webserver and with scheme and host you may even reference external resources.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
phparmyAuthor Commented:
i am asking how can i define this via javascript or etc. because i do not want to make changes in my css when  i setup my web application to new server.
0
 
hieloCommented:
>>i am asking how can i define this via javascript
That is NOT what you asked. Maybe that is what you MEANT to ask, but it is definitely not what you asked.

>>because i do not want to make changes in my css when  i setup my web application to new server.
Exactly. If you provide an absolute path as the image path, when you move/FTP the entire site from, say localhost to http://www.yourdomain.com, then it should work. You just need to provide an absolute path to the images in your css.

How do you determine the absolute path to your images? Let's say you are developing on your local computer and you type the following on the address bar:
http://localhost/images/mainpage/1.jpg

if the image loads, then to determine the absolute path you:
A. discard the initial "http://" and you are left with:
localhost/images/mainpage/1.jpg

B. remove everything BEFORE the first "/" and you are left with:
/images/mainpage/1.jpg

That is your absolute path! Now let's say you moved/FTP your site to your live/production server and your domain is phparmy.com. So if you were to type:
http://www.phparmy.com/images/mainpage/1.jpg

you image should load, at which point if you apply step A above, you will be left with:
www.phparmy.com/images/mainpage/1.jpg

Now apply step B and you are left with:
/images/mainpage/1.jpg

Notice how the end result is the same! So that is what you need on your css:
#box{
      background-image:url(/images/mainpage/1.jpg);
}

#line{
      background-image:url(/images/2.jpg);
}
0
 
FDMilwaukeeCommented:
to not make changes in your site when you upload it, you don't want to use absolute paths at all!!!  You want to use relative paths!
0
 
vinkrinsCommented:
Hi phparmy,

I was wondering why css in your code is not working properly, even you already have correct directory structure of your project folders, can you please provide the link where your project is live,

so that i can help you out :D

Vinay Rajput



0
 
thehagmanCommented:
You mention /user/index.php and /admin/external/tech.php, which are probably absolute url paths of your web site, i.e. I assume that retrieving the URL
http://www.yourdomain.com/user/index.php 
shows the output of the FILE
www/myproject/user/index.php

Hence your file
www/myproject/images/mainpage/1.jpg
could be referenced by absolute url like this:
url(/images/mainpage/1.jpg)

You see the pattern?
0
 
phparmyAuthor Commented:
main problem is.
www.phparmy.com/project1/
www.phparmy.com/project2/

you see it is not main root in one css you have to write
/project1/images/image1.jpg
/project2/images/image2.jpg

but i think there is no way to do this automatic. thanks.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now