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

Question

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

Example of the photo from TwoFour54

我正在测试的网站是 wordpress。我尝试使用 footer.php，但它运行良好，但当我拉伸(stretch)网站(缩小或放大)时，它会被毁掉。我尝试使用 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>

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

有没有人有什么想法？

Answer 1

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

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

编辑:实际上，如果您将它从 HTML 中删除并使用 :before 伪元素通过 css 添加它会更好，如果您只是出于设计目的使用它的话。