如何将图像标题放在菜单和部分上？

首先，我使用wordpress的儿童主题（TwentyThirteen Parent Theme）。我必须使用的标题有这样的图像：如何将图像标题放在菜单和部分上？

所以，黑色是我的标题图片（白色部分是透明的），在灰我有我的菜单栏和红色我的第一部分内容的网站。

我的问题是...我如何设置（与css/bootstrap）到图像标题是这样的？这是什么基本结构？

我的header.php代码是这样的：

二十13

?><!DOCTYPE html> 
<!--[if IE 7]> 
<html class="ie ie7" <?php language_attributes(); ?>> 
<![endif]--> 
<!--[if IE 8]> 
<html class="ie ie8" <?php language_attributes(); ?>> 
<![endif]--> 
<!--[if !(IE 7) & !(IE 8)]><!--> 
<html <?php language_attributes(); ?>> 
<!--<![endif]--> 
<head> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width"> 
    <title><?php wp_title('|', true, 'right'); ?></title> 
    <link rel="profile" href="http://gmpg.org/xfn/11"> 
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
    <!--[if lt IE 9]> 
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> 
    <![endif]--> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 
    <div id="page" class="hfeed site"> 
     <header id="masthead" class="site-header" role="banner"> 
      <div class="header"> 
       <?php echo '<img class="img-responsive" src="' . get_stylesheet_directory_uri() . '/img/header.png">';?> 
      </div> 


      <nav class="navbar navbar-default"> 
       <div class="container-fluid"> 
       <div class="navbar-header"> 

       </div> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Page 1</a></li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
       </ul> 
      </div> 
     </nav> 

    </header><!-- #masthead --> 

    <div id="main" class="site-main">

来源

2017-04-05 U23r

你能发布一个工作演示吗？ –

@Michael_B它基本上是这个https://twentythirteendemo.wordpress.com我从零开始，只是删除头标签之间的这段代码，并放置一张图片来测试位置和位置：绝对图像和菜单栏的相对似乎不起作用。 – U23r

主题网站的标题/描述&菜单来下标题部分，所以你可以将其添加上述标题图片部分。请参考下面的示例代码。

<body <?php body_class(); ?>> 
<!-- Here you can add custom header image section outside page div --> 
<div class="headerImg1"><img src=""></div> <!-- postion one --> 

    <div id="page" class="hfeed site"> 
<!-- or you can also add here inside page div. --> 
<div class="headerImg2"><img src=""></div> <!-- postion two --> 
     <header id="masthead" class="site-header" role="banner"> 
     <!-- site title/description code --> 
      <div id="navbar" class="navbar"> 
       <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
        <!-- Nav code --> 
       </nav><!-- #site-navigation --> 
      </div><!-- #navbar --> 
     </header><!-- #masthead --> 

     <div id="main" class="site-main">

来源

2017-04-13 11:07:10

如何将图像标题放在菜单和部分上？

回答

相关问题