如何在页脚上方插入图像并保持静止[WORDPRESS]?

时间:2017-01-29 06:53:49

标签: html css wordpress css3 wordpress-theming

我想在页脚上方添加一张图片,如下图所示,或者您可以访问该网站:http://creativelab.twofour54.com/en/

Example of the photo from TwoFour54

我正在测试它的网站是wordpress。我尝试使用footer.php,但它工作得很好但是当我拉伸网站(缩小或缩小)它会被毁坏。我尝试用CSS中的位置标记使其静态,但是没有用。

<div class="cfa" style="margin-left: 200px; width: 100%; z-index: 10;">
	<div class="container">
		<div class="col-sm-12">
			<img src="http://localhost:8080/TESTWORDPRESS/wp-content/uploads/2017/01/Sketch-Book-icon.png">
		</div>
	</div>
</div> 

<?php 
 /*
 Template for Footer
 */
 ?>

		<footer id="footer">
			<div class="row clearfix">
            	
                <?php 
				
				if ( ! dynamic_sidebar ( 'footer_widgets' ) ){
					thdglkr_emptysidebar('Footer');
					}        				
				?>

			</div><!-- row -->
			
            <?php if (_option('footer_menu','1')=='1'){ ?>
			<div class="footer-last row mtf clearfix">
				<span class="copyright"><?php echo _option('footer_text'); ?></span>
                <?php 
				wp_nav_menu(  
					array(  
						'theme_location' => 'secondary',
						'menu' => 'Footer Menu',
						'container'       	=> 'div',
						'container_class'  => '' ,
						'menu_class'	   => 'foot-menu',
						
					)  
				); 
			}else{?>
					
			<div class="footer-last row mtf clearfix center">
				<span class="copyright center"><?php echo _option('footer_text'); ?></span> 
                    
			<?php } ?> 


			</div><!-- end last footer -->

		</footer><!-- end footer -->

	</div><!-- end layout -->
	</div><!-- end frame -->


	<?php if (_option('footer_gototop')==1): ?>
		<div id="toTop"><i class="icon-angle-up"></i></div><!-- Back to top -->
	<?php endif; ?>
    



<?php wp_footer(); ?>

	

</body>
</html>

注意:上面的代码是来自我的测试本地主机的Footer.php

有没有人有任何想法?

1 个答案:

答案 0 :(得分:0)

将您的.cfa放入页脚中的html中。在你的CSS中:

.cfa {
position: absolute;
top: 0;
left: 200px; 
margin-top: -100px; //change this to the height of your image
}

编辑:实际上如果你可以从HTML中删除它,并且如果你只是出于设计目的而使用:before伪元素通过css添加它会更好。