How to set background-image in codeigniter 3

php css codeigniter background-image codeigniter-3

18,599

Solution 1

try this

<html>
 <head>
   <title>OpediaLab</title>
   <link rel="stylesheet" href="<?php echo base_url('style.css');?>">
 </head>
 <body>
   <h1></h1>
   <?php echo validation_errors(); ?>
   <?php echo form_open('verifylogin'); ?>

<label for="username">Username:</label>
     <input type="text" size="20" id="username" name="username"/>
     <br/>
     <label for="password">Password:</label>
     <input type="password" size="20" id="passowrd" name="password"/>
     <br/>
     <input type="submit" value="Login"/>
   </form>
 </body>
</html>

Solution 2

Change your code like this:::

<html>
 <head>
   <title>OpediaLab</title>
<link rel="stylesheet" type="text/css" href="<?=base_url()?>."application/views/style.css"/>
 </head>
 <body>
   <h1></h1>
   <?php echo validation_errors(); ?>
   <?php echo form_open('verifylogin'); ?>


<label for="username">Username:</label>
     <input type="text" size="20" id="username" name="username"/>
     <br/>
     <label for="password">Password:</label>
     <input type="password" size="20" id="passowrd" name="password"/>
     <br/>
     <input type="submit" value="Login"/>
   </form>
 </body>
</html>

18,599

Author by

user5913892

Updated on June 04, 2022

Comments

user5913892 almost 2 years

I started to use codeigniter few days ago and I am not able to set background image by css file.My controller(verifylogin.php) is this:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class VerifyLogin extends CI_Controller {

 function __construct()
 {
   parent::__construct();
   $this->load->model('user','',TRUE);
   $this->load->helper('url');
 }

 function index()
 {
   //This method will have the credentials validation
   $this->load->library('form_validation');

   $this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
   $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|callback_check_database');

   if($this->form_validation->run() == FALSE)
   {
     //Field validation failed.  User redirected to login page
     $this->load->view('login_view');
   }
   else
   {
     //Go to private area
     redirect('home', 'refresh');
   }

 }

 function check_database($password)
 {
   //Field validation succeeded.  Validate against database
   $username = $this->input->post('username');

   //query the database
   $result = $this->user->login($username, $password);

   if($result)
   {
     $sess_array = array();
     foreach($result as $row)
     {
       $sess_array = array(
         'id' => $row->id,
         'username' => $row->username
       );
       $this->session->set_userdata('logged_in', $sess_array);
     }
     return TRUE;
   }
   else
   {
     $this->form_validation->set_message('check_database', 'Invalid username or password');
     return false;
   }
 }
}

while the view(login_view.php) is this one.

<html>
 <head>
   <title>OpediaLab</title>
 </head>
 <body>
   <h1></h1>
   <?php echo validation_errors(); ?>
   <?php echo form_open('verifylogin'); ?>

<link rel="stylesheet" type="text/css" href="<?=base_url()?>style.css"/>
<label for="username">Username:</label>
     <input type="text" size="20" id="username" name="username"/>
     <br/>
     <label for="password">Password:</label>
     <input type="password" size="20" id="passowrd" name="password"/>
     <br/>
     <input type="submit" value="Login"/>
   </form>
 </body>
</html>

The css file contains just these two lines:

body{
background-image: url("C:/wamp/www/CI/application/views/immagini/Opedia_LAB.png");
background-color: green;
}

Now, I'm pretty sure that the css file have to be in a specific folder (I have seen many tutorial, but not all say the same thing). The last attempt I made was to put the file in "views" as shown in the picture

I hope I was clear enough, and I know, this is because I'm very new about this framework.

This is what I see at any attempt to change what I did. No errors but no css effect.

UPDATE:

This is what I get from the console:

Ketan Solanki about 8 years

Base_url will only reflect upto CI Folder (In this case) But the CSS file is stored inside application>>views>>style.css
Ketan Solanki about 8 years

@user5913892 kindly show us the error which can be seen in ur browser's error console.
user5913892 about 8 years

I don't get any error, this is my problem. I attach what I see in my browser, in the question:
Ketan Solanki about 8 years

@user5913892 Just press Function key F12 in your browser, Then search for console,You might get any error over there..
user5913892 about 8 years

I update the question with the picture of the console. I think the problem, is that the path is http://localhost/CI/localhost/application/views/style.css instead of http://localhost/CI/application/views/style.css. But who said to add "localhost" to the path. I don't get it.
Ketan Solanki about 8 years

@user5913892 did you get this error in my code? Because i hve not added any word like "localhost"
Mr. ED about 8 years

It is best to have images in a assets folder out side of application directory.
user5913892 about 8 years

Yes. But the problem is not your code. I just opened the config.php file in config folder and i saw this $config['base_url'] = 'localhost'; If I remove localhost the background color is green, but if remove the background color, I don't see any picture as background.
Ketan Solanki about 8 years

in the css file change the code like this :body{ background-image: url("immagini/Opedia_LAB.png"); background-color: green; }
user5913892 about 8 years

I solved. I moved "Immagini" in C:\wamp\www\CI and also Style.css in the same folder. AFter that everything it works fine. Your css was correct. Thank you.
Admin over 6 years

Or in your views you can write inline css just like : <style> body{ background: url(<?php echo base_url();?>assets/images/bg_images.jpg); background-size:100%; background-repeat: no-repeat; width: 100%; } </style>