I want to make the background image of joomla login be full width

Question

I have custimized the css of my joomla login page, everything is perfect, but I would like the image that I have inserted in the background through css to scale to whole width. Right now it is of a certain width size, despite the fact that in my css I have added width:100%.

Here is the login code:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_users
 * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @since       1.5
 */

defined('_JEXEC') or die;
JHtml::_('behavior.keepalive');
?>
<div class="login<?php echo $this->pageclass_sfx?>">
    <?php //if ($this->params->get('show_page_heading')) : ?>
    <div class="page-header">
        <h1 class="title">
            <?php echo $this->escape($this->params->get('page_heading')); ?>
        </h1>
    </div>
    <?php //endif; ?>

    <?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
    <div class="login-description">
    <?php endif ; ?>
        <?php if (($this->params->get('login_image')!='')) :?>
            <img src="<?php echo $this->escape($this->params->get('login_image')); ?>" class="login-image" alt="<?php echo JTEXT::_('COM_USER_LOGIN_IMAGE_ALT')?>"/>
        <?php endif; ?>
        <?php if($this->params->get('logindescription_show') == 1) : ?>
            <?php echo $this->params->get('login_description'); ?>
        <?php endif; ?>



    <?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
    </div>
    <?php endif ; ?>

        <form class="form-horizontal" action="<?php echo JRoute::_('index.php?option=com_users&task=user.login'); ?>" method="post">

        <fieldset class="well">
            <?php foreach ($this->form->getFieldset('credentials') as $field): ?>
                <?php if (!$field->hidden): ?>
                    <div class="control-group">
                        <div class="control-label">
                            <?php echo $field->label; ?>                    
                        </div>
                        <div class="controls">
                             <?php echo $field->input; ?>           
                        </div>

                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
            <?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
            <div class="control-group">
                <label id="remember-lbl" class="control-label" for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
                <input id="remember" type="checkbox" name="remember" class="inputbox" value="yes"  alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" />
            </div>
            <?php endif; ?>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn-send"><?php echo JText::_('JLOGIN'); ?></button>
                    <input type="hidden" name="return" value="<?php echo base64_encode($this->params->get('login_redirect_url', $this->form->getValue('return'))); ?>" />
                    <?php echo JHtml::_('form.token'); ?>
                </div>
            </div>


        </fieldset>
    </form>
</div>

<div class="other-link">
    <ul class="yt-list type-square">
        <li class="pull-left">
            <a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
            <?php echo JText::_('COM_USERS_LOGIN_RESET'); ?></a>
        </li>

        <?php
        $usersConfig = JComponentHelper::getParams('com_users');
        if ($usersConfig->get('allowUserRegistration')) : ?>
        <li class="pull-right">
            <a href="<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
                <?php echo JText::_('COM_USERS_LOGIN_REGISTER'); ?></a>
        </li>
        <?php endif; ?>
    </ul>
</div>

Answer 1

1. Don't modify core Joomla files, learn about overrides ( 1 , 2 & 3 ) and use them, that way when a security update is released you can apply it safely and not have to worry about your changes being overwritten.

2. Did you mean backgroud-size : 100% rather than width: 100% ? That would make more sense for background images. In that case, I would recommend reading this primer on " Scaling background images "

3. To help further we will need to see your existing CSS that you've created and either a link showing the problem or a good screen shot of the issue.