how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

Question

I'm using codeigniter, I loaded all css files and those are working very well. My directory structure is displayed in following image:

I loaded style.cssusing this code :

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/style.css">

all style attributes are set very well and working. But after that I found images which are set inside css file are not displaying on my site! My code in css :

.social_nav li.facebook a{ background-image:url("images/socials.png"); background-position:0 -30px; background-size:270px 60px}

So is their any procedure to set base_url() for background-image:url("images/socials.png"

Have you set the base url $config['base_url'] = 'http://localhost/project/'; or your domain $config['base_url'] = 'http://www.example.com/'; — user4419336
– user4419336, Commented Oct 4, 2016 at 9:40

Praveen Kumar Purushothaman · Accepted Answer · 2016-10-04 08:51:07Z

2

Since the CSS Background property is relative to the CSS file, you can use:

background: url("../../"); /* Becomes the base URL */

Now from there you can traverse the path:

background: url("../../assets/images/socials.png");

You can also use this as alternate:

background: url("../images/socials.png");

answered Oct 4, 2016 at 8:51

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Abhijit Kumbhar Over a year ago

I added the code explained by you, but its still not working.. background: url("../images/socials.png");

devpro Over a year ago

@AbhijitKumbhar: check your console, i hope u are getting the 404 url for image, please share the url

Abhijit Kumbhar Over a year ago

after removing back directory code(../) when I checked browser console I found image link (localhost/myproject/assets/css/images/socials.png) on opening this link I found image but its not displaying on my website's index.php page

devpro Over a year ago

@AbhijitKumbhar: i suggest to check background-position:0 -30px; background-size:270px 60px; maybe problem here. because links not breaking.. links working fine as per your comment, Praveen, correct me if i am wrong

Praveen Kumar Purushothaman Over a year ago

@devpro Agreed with you man! :) Also I strongly feel the image is corrupted.

|

devpro · Accepted Answer · 2016-10-04 09:42:05Z

1

Note that, if this image socials.png is available in assets/images folder than you can use like:

.social_nav li.facebook a{ 
  background-image:url("../images/socials.png"); //one step back
  background-position:0 -30px; 
  background-size:270px 60px;
}

If your image inside the assets/css/images than your code must be work, you need to check these two property by changing the values or removing.

background-position:0 -30px;
background-size:270px 60px;

Side Note:

Maybe, in this case, your file is corrupted, also check by using the different image.

Also check your browser console, you are getting 404 links for this image if your provided path is wrong.

edited Oct 4, 2016 at 9:42

answered Oct 4, 2016 at 8:58

devpro

16.1k3 gold badges29 silver badges39 bronze badges

4 Comments

Abhijit Kumbhar Over a year ago

I'm not getting any 404 error in browser , image is avalible at this (localhost/myproject/assets/css/images/socials.png) link but not displaying on my index.php page

devpro Over a year ago

@AbhijitKumbhar: it means, u need to check this background-position:0 -30px; background-size:270px 60px;

Abhijit Kumbhar Over a year ago

I checked that, also removed that but not working :(

Abhijit Kumbhar Over a year ago

Is their any option in css to set base url like PHP's base url function "<?php echo base_url(); >?"

Abhijit Kumbhar · Accepted Answer · 2016-10-04 09:46:50Z

1

I found answer after getting the help and finally understanding silly mistake of mine everything is working fine except the adblocker I disabled that and now images are displaying

answered Oct 4, 2016 at 9:46

Abhijit Kumbhar

9613 gold badges24 silver badges50 bronze badges

Collectives™ on Stack Overflow

how to set base_url() inside css file using codeigniter, to access background_image_url inside css file?

3 Answers 3

16 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

16 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related