Задать background через php.

Код скрипта который выводит авторов с их фотографиями и т.д.

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .php.geshi_code {font-family:monospace;} .php.geshi_code .imp {font-weight: bold; color: red;} .php.geshi_code .kw1 {color: #b1b100;} .php.geshi_code .kw2 {color: #000000; font-weight: bold;} .php.geshi_code .kw3 {color: #990000;} .php.geshi_code .co1 {color: #666666; font-style: italic;} .php.geshi_code .co2 {color: #666666; font-style: italic;} .php.geshi_code .co3 {color: #0000cc; font-style: italic;} .php.geshi_code .co4 {color: #009933; font-style: italic;} .php.geshi_code .coMULTI {color: #666666; font-style: italic;} .php.geshi_code .es0 {color: #000099; font-weight: bold;} .php.geshi_code .es1 {color: #000099; font-weight: bold;} .php.geshi_code .es2 {color: #660099; font-weight: bold;} .php.geshi_code .es3 {color: #660099; font-weight: bold;} .php.geshi_code .es4 {color: #006699; font-weight: bold;} .php.geshi_code .es5 {color: #006699; font-weight: bold; font-style: italic;} .php.geshi_code .es6 {color: #009933; font-weight: bold;} .php.geshi_code .es_h {color: #000099; font-weight: bold;} .php.geshi_code .br0 {color: #009900;} .php.geshi_code .sy0 {color: #339933;} .php.geshi_code .sy1 {color: #000000; font-weight: bold;} .php.geshi_code .st0 {color: #0000ff;} .php.geshi_code .st_h {color: #0000ff;} .php.geshi_code .nu0 {color: #cc66cc;} .php.geshi_code .nu8 {color: #208080;} .php.geshi_code .nu12 {color: #208080;} .php.geshi_code .nu19 {color:#800080;} .php.geshi_code .me1 {color: #004000;} .php.geshi_code .me2 {color: #004000;} .php.geshi_code .re0 {color: #000088;} .php.geshi_code span.xtra { display:block; }

                <link rel="stylesheet" type="text/css" href="css/demo3.css" />
    <!-- Style of the component -->
    <link rel="stylesheet" type="text/css" href="css/style_authors.css" />
    <noscript>
      <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
    </noscript>
    <div class="container">
      <div id="va-accordion" class="va-container">
        <div class="va-nav">
          <span class="va-nav-prev">Previous</span>
          <span class="va-nav-next">Next</span>
        </div>
        <div class="va-wrapper">
          <div class="va-slice va-slice-1">
            <h3 class="va-title">Marketing</h3>
            <div class="va-content">
              <p>Henry Watson</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
          <div class="va-slice va-slice-2">
            <h3 class="va-title">Management</h3>
            <div class="va-content">
              <p>Keith Johnson</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
          <div class="va-slice va-slice-3">
          <img src="http://zerkalo1.tk/img/3.jpg">
            <h3 class="va-title">Visual Design</h3>
            <div class="va-content">
              <p>Andrew Alaniz</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
          <div class="va-slice va-slice-4">
            <h3 class="va-title">Quality Control</h3>
            <div class="va-content">
              <p>Ben Freeman</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
          <div class="va-slice va-slice-5">
            <h3 class="va-title">Web development</h3>
            <div class="va-content">
              <p>Alex Schuman</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
          <div class="va-slice va-slice-6">
            <h3 class="va-title">Customer Support</h3>
            <div class="va-content">
              <p>Maria Wales</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
          <div class="va-slice va-slice-7">
            <h3 class="va-title">Server Administration</h3>
            <div class="va-content">
              <p>Paul White</p>
              <ul>
                <li><a href="#">Об авторе</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
          </div>
        </div>
              <div class="more">
        <ul>
          <li>More examples:</li>
          <li><a href="example1.html">Example 1</a></li>
          <li><a href="example2.html">Example 2</a></li>
          <li class="selected"><a href="example3.html">Example 3</a></li>
          <li><a href="example4.html">Example 4</a></li>
          <li><a href="example5.html">Example 5</a></li>
        </ul>
      </div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.vaccordion.js"></script>
    <script type="text/javascript">
      jQuery(function() {
        jQuery('#va-accordion').vaccordion({
          visibleSlices  : 5,
          expandedHeight  : 250,
          animOpacity    : 0.1,
          contentAnimSpeed: 100
        });
      });
 



Через этот CSS:


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }

.va-container{
  position:relative;
  margin:40px auto 0 auto;
}
.va-wrapper{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  background:#000;
}
.va-slice{
  cursor:pointer;
  position:absolute;
  width:100%;
  left:0px;
  overflow:hidden;
}
.va-slice-1{
  background:#000 url(../images/1.jpg) no-repeat center center;
}
.va-slice-2{
  background:#000 url(../images/2.jpg) no-repeat center center;
}
.va-slice-3{
  background:#000 url(../images/3.jpg) no-repeat center center;
}
.va-slice-4{
  background:#000 url(../images/4.jpg) no-repeat center center;
}
.va-slice-5{
  background:#000 url(../images/5.jpg) no-repeat center center;
}
.va-slice-6{
  background:#000 url(../images/6.jpg) no-repeat center center;
}
.va-slice-7{
  background:#000 url(../images/7.jpg) no-repeat center center;
}
.va-slice-color-1{
  background-color:#97c5eb;
}
.va-slice-color-2{
  background-color:#68ace5;
}
.va-slice-color-3{
  background-color:#0072cf;
}
.va-slice-color-4{
  background-color:#0039a6;
}
.va-slice-color-5{
  background-color:#00338e;
}
.va-slice-color-6{
  background-color:#002c76;
}
.va-slice-color-7{
  background-color:#002144;
}
.va-title{
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform:uppercase;
  font-size:60px;
  margin-left:20px;
  color:#fff;
  text-shadow: 0px 0px 1px white;
}
.va-content{
  display:none;
  margin-left:25px;
}
.va-slice p{
  font-size: 22px;
  font-style: italic;
  font-family:Georgia, serif;
}
.va-slice ul{
  margin-top:20px;
}
.va-slice ul li{
  float:left;
  margin:0px 2px;
}
.va-slice ul li a{
  color:#000;
  background:#eede2f;
  padding:3px 6px;
  font-size:14px;
  font-family:'PT Sans', sans-serif;
  text-transform:uppercase;
}
.va-slice ul li a:hover{
  background:#000;
  color:#fff;
  text-shadow:none;
}
.va-nav span{
  width:40px;
  height:25px;
  background:transparent url(../images/prev.png) no-repeat center center;
  position:absolute;
  top:-35px;
  left:50%;
  margin-left:-20px;
  text-indent:-9000px;
  opacity:0.7;
  cursor:pointer;
  display:none;
  z-index:100;
}
.va-nav span.va-nav-next{
  background-image:url(../images/next.png);
  top:auto;
  bottom:-35px;
}
.va-nav span:hover{
  opacity:1.0;
}
 


Вышеприведённый код выводит авторов с их фотографиями. Проблема в том что эти фотографии задаются через стиль скрипта - короче так сказать статические. Как мне этот background задавать через php код - ну например :
.va-slice-1{
background:url(<?php the author_photo; ?>) no-repeat center center ;
}
0
css html php

1 ответов

Вам на выбор несколько вариантов:

Хоть это и не очень красиво, но можно вынести ваши стили прямо в страницу с помощью тега style :


 <style type="text/css">
  ... тут уже ваш CSS код с php-миксми
  </style>
 

можете прописывать прямо в атрибут style элемента:

<div style="background:#000 url(../images/7.jpg) no-repeat center center;">MyDIV</div>
 

а можете взять php-код, возвращающий ваш css и внести его в страницу таким образом:

    <link rel="stylesheet" type="text/css" href="/stylegen.php" />
 
4