Bild als Hintergrundbild

[Rule Breaker]

Guten morgen HTML Gemeinde,

ich verwende für das Content Management System Joomla, ein Modul das sich "Letzte Events" nennt. Da mir das Modul im originalen Zustand nicht gefällt, bin ich gerade dabei das gute Stück umzugestalten. Allerdings fehlen mir dazu ein paar Kentnisse.

Das Event Bild das von einer weiteren Komponente angegeben wird, möchte ich als Hintergrundbild verwenden damit der Text und die Links auf dem Bild sind und nicht seperat dadrunter um Platz zu sparen. Ich habe bereits ein paar varianten versucht, allerdings hat nichts davon wirklich funktioniert. Auf der Seite FLYING PISTONS e.V. - Willkommen auf Flying Pistons e.V. (rechte seite "Events) befindet sich das Modul.

Hier die default.php

<?php
/**
 * @package        Upcoming Events Module
 * @copyright (C) 2008 by Slashes & Dots Sdn Bhd - All rights reserved!
 * @license        GNU/GPL, see LICENSE.php
 */
defined('_JEXEC') or die('Restricted access');
?>
<?php
if( !empty( $events ) )
{
?>
<ul class="latestevents<?php echo $params->get('moduleclass_sfx'); ?>">
    <?php
    foreach( $events as $event )
    {
        $handler    = CEventHelper::getHandler( $event );
                $tipslength = $params->get( 'tipslength');
                
                if ($event->description != '') {
                    $tooltips = $event->description;
                } else if ($event->summary != '') {
                    $tooltips = $event->summary;
                } else {
                    $tooltips = $event->title;
                }
                
                $tooltips = strip_tags($tooltips);
                $tooltips = CStringHelper::escape($tooltips);
                $tooltips = CStringHelper::truncate($tooltips, $tipslength, '...');
    ?>
        <li class="jsRel jomNameTips tipFullWidth" title="<?php echo $tooltips;?>">
            <div class="event-date jsFlLf">  
                <div> 
                    <a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
                    <img class="cAvatar jsFlLf" src="<?php echo $event->getThumbAvatar();?>" alt="<?php echo CStringHelper::escape( $event->title );?>" /></a>    
                </div>
                <div><?php echo CEventHelper::formatStartDate($event, $config->get('eventdateformat') ); ?></div>
            </div>
            <div class="event-detail">
                <div class="event-title">
                    <a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
                        <?php echo $event->title;?>
                    </a>
                </div>
                <div class="event-loc">
                    <?php echo $event->location;?>
                </div>
                <div class="event-attendee small">
                    <a href="<?php echo $handler->getFormattedLink('index.php?option=com_community&view=events&task=viewguest&eventid=' . $event->id . '&type='.COMMUNITY_EVENT_STATUS_ATTEND);?>"><?php echo JText::sprintf((cIsPlural($event->confirmedcount)) ? 'COM_COMMUNITY_EVENTS_ATTANDEE_COUNT_MANY':'COM_COMMUNITY_EVENTS_ATTANDEE_COUNT', $event->confirmedcount);?></a>
                </div>
            </div>
            <div class="clr"></div>    
        </li>
    <?php
    }
    ?>
</ul>
<?php
}
else
{
?>
    <div><?php echo JText::_( 'COM_COMMUNITY_EVENTS_NO_EVENTS_ERROR' );?></div>
<?php
}
?>

Dieser Code ist zuständig für das Event Bild das ich als Hintergrundbild angeben möchte:

<div> 
                    <a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
                    <img class="cAvatar jsFlLf" src="<?php echo $event->getThumbAvatar();?>" alt="<?php echo CStringHelper::escape( $event->title );?>" /></a>    
                </div>

Wie formatiere ich denk Link so um, das dieses als Hintergrund Bild dargestellt wird? Hier auch die dazugehörige CSS (style.css):

ul.latestevents {
    margin:0;
    padding:0;
    width:100%;
}

ul.latestevents .event-date div + div {
    background:none repeat scroll 0 0 #eeeeee;
    border-top:1px solid #dddddd;
    font-size:80%;
    padding:3px 0;
}
ul.latestevents .event-date{
    float: left;
}

ul.latestevents .event-date div {
    background:none repeat scroll 0 0 #EEEEEE;
    font:bold 18px Arial,sans-serif;
    text-align:center;
}

ul.latestevents .event-attendee {
    font-size:80%;
}

ul.latestevents li {
    margin-top:10px;
    padding-top:10px;
    background: none !important;
    list-style: none;
    z-index: 0;
}

    ul.latestevents li + li {
        border-top:1px solid #DDDDDD;
    }

ul.latestevents .event-date {
    border:1px solid #dddddd;
    width:144px;
}

ul.latestevents .event-date a:hover {
    background:none;
}

ul.latestevents .event-date img.cAvatar {
    width:140px;
    padding:2px;
    
}

ul.latestevents .event-detail {
    margin-left:55px;
}

ul.latestevents .avatar {
    height:auto;
    width:40px;
}

ul.latestevents .profile-event-actions{
    text-align: right;
    margin-top: 10px;
}

ul.latestevents .profile-event-actions a + a {
    border-left: 1px solid #000;
    padding-left: 5px;
}

ul.latestevents .profile-events-info {
    float:left;
}

ul.latestevents  .profile-events-action{
    text-align: right;
    outline:medium none;
    padding:0 5px;
}

ul.latestevents .profile-events-action a {
    background:none repeat scroll 0 0 transparent;
    padding-left:10px;
}

ul.latestevents .profile-events-footer {
    margin:0;
    border-top:1px solid #DDDDDD;
    font-size:90%;
    padding: 5px 0 0;
    margin: 10px 0 0;
}

Über jede Hilfe bin ich sehr dankbar! Mit freundlichen Grüßen,
Markus :-)

 

[bdt600]

Crossposting! :(

 

[Rule Breaker]

sry für das Crossposting.. ich brauche wirklich dringend Hilfe da ich kaum noch Zeit habe für die Community. Alle foren die uns helfen konnten werden selbstverständlich in einem Danke-Beitrag verlinkt.

Lieben Gruß,
Markus :-)