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

<?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
}
?>

Alles anzeigen

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

PHP

<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):

PHP

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;
}

Alles anzeigen

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

explanator

Deine Frage bezieht sich auf das CMS Joomla, daher wäre es angebrachter in einem Forum, welches sich auf Joomla spezialisiert hat, nachzufragen. Gerade bei sogenannten Modulen, können Abhängigkeiten innerhalb des CMS bestehen, die uns nicht bekannt sind.

Grundsätzlich ist bei CSS für Hintergrundbilder die Eigenschaft background-image zuständig.

Bandit

Auszug aus den Forenregeln:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen

Rule Breaker

Danke explanator,

an das joomlaportal habe ich micht bereits gewandt. Ich versuche mal irgendwie die Eigenschaft background-image einzuarbeiten.

Hey Bandit,
Tut mir leid die Forenregel war mir nicht bekannt. Das kommt nicht mehr vor! Danke für den Hinweiß.

Wenn ich weiter gekommen bin, Poste ich das Ergebniss.

Mit freundlichen Grüßen,
Markus

Tags