Mehrere Bilder positionieren- geht das?

D²Weblog

Hallo Ihr,

ich frage mich gerade ob ich innerhalb eines CSS Styles, wie z.b hier ...

Code

body {
 margin: 0;
 padding: 0;
 background:#4a4b4c url(img/testbg1.jpg) no-repeat;
        background-position:bottom left;
 font-family: Verdana,Tahoma, Arial, Serif;
 line-height: 1.6em;
 font-size: 10px; /* IE5 Win */
   voice-family: "\"}\"";
   voice-family: inherit;
   font-size: 10px; /* easy scaling */
   font-size: 0.76em;
 color: #333;
}

Alles anzeigen

...noch weitere Bilder einfügen kann. Also weil damit hab ich jetzt unten Links ein Bild fixiert. Wollte gerne aber noch unten rechts eins und oben mit repeat. Weiß jemand eine Lösung?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Nein das geht nicht. Du brauchst weitere HTML-Elemente, denen du ein Hintergrundbild zuweisen kannst.

D²Weblog

Und wie geht das bitte?!

marX

Einfaches Beispiel für eine Box mit 4 runden Ecken:

HTML:

Code

<div class="box">
  Lorem ipsum...
  <span class="corner-topleft"></span>
  <span class="corner-topright"></span>
  <span class="corner-bottomleft"></span>
  <span class="corner-bottomright"></span>
</div>

In CSS werden den corner-spans jetzt Hintergrundbilder (d.h. die Rundungen) zugewiesen und die Boxes entsprechend relativ in dem Box-div positioniert. Prinzip klar?

CSS für eine Ecke:

Code

.box .corner-bottomright {
  width:10px;
  height:10px;
  position:relative;
  bottom:0;
  right:0;
  background:url(corner-bottomright.png) no-repeat;
}

D²Weblog

Hmm...ich hab jetzt einiges versucht aber ich bekomm das einfach nicht gebacken. Ich weiß einfach nicht wie (und wo!) ich das in das Template integrieren soll. Klingt komisch, ist aber so! Ich werde es einfach mal weiter versuchen.

Ich poste mal zwischenzeitlich mein Template, vielleicht kommt ja jemand darauf ...

PHP

.....
.....
.....[HEAD CLOSE].....
....
 
</head>
  <body>
<div id="header">
 <div id="logo">
  <h1><a href="<?php bloginfo('siteurl'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
  <h2><?php bloginfo('description');?></h2>
 </div>  
 <div id="menu">
 <ul>
     <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" title="Home">Home</a></li>
     <?php wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude=10,19,20,12,22');?>
 </ul>
 </div> 
</div>
<div id="logochange"><?PHP displayrndimg(); ?></div>
 
<div id="main">
 <div id="content">
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
         <div class="post" id="post-<?php the_ID(); ?>">
 
            <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
            <div class="meta">
          <p>Datum: <?php the_time('d') ?>. <?php the_time('M') ?> <?php the_time('Y') ?> | Themenbereich: <?php the_category(',') ?> | <?php comments_popup_link(__('Schreib deine Meinung dazu! Und los...'), __('Eine Meinung vorhanden - Lesen!'), __('Schon % Meinungen vorhanden - Lesen!')); ?></p>
         </div>
         <div class="entry1">
      <?php the_content(__('<b>Ganzen Artikel lesen!</b>')); ?>
      <?php wp_link_pages(); ?>
              </div>
           
         </div>
      <?php endwhile; else: ?>
          <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
      <?php endif; ?>
      <p align="center"><?php posts_nav_link(' - ','« Newer Posts','Older Posts »') ?></p>
 </div>


  <?php get_sidebar();?>
 
</div>
<div id="footer">
  
 <p><span>[ <a href="realisierung" title="Realisierung / Umsetzung">Realisierung</a> | <a href="kontakt" title="Kontaktformular">Kontakt</a> | <a href="impressum" title="Impressum">Impressum</a> ]</span><strong><?php bloginfo('name');?></strong>  &copy; <?php echo date('Y');?> </p>
</div>
<?php wp_footer();?>
</body>
</html>

Alles anzeigen

Das ist mein Template.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mehrere Bilder positionieren- geht das?

Jetzt mitmachen!