html - 我想让 joomla 登录的背景图片全宽

Question

我已经自定义了我的 joomla 登录页面的 css，一切都很完美，但我希望我通过 css 插入背景的图像能够缩放到整个宽度。现在它有一定的宽度大小，尽管我在我的 css 中添加了 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. 不要修改核心 Joomla 文件，了解覆盖(1、2 和 3)并使用它们，这样当发布安全更新时，您可以安全地应用它，而不是担心您的更改被覆盖。

2. 你的意思是backgroud-size : 100% 而不是 width: 100%？这对 background 更有意义图片。在这种情况下，我建议您阅读有关“Scaling background images”的这本入门书

3. 为进一步提供帮助，我们需要查看您创建的现有 CSS 以及显示问题的链接或问题的良好屏幕截图。