背景圖片可點擊和響應

Question

試圖使背景圖片可點擊。我用如下：<a href="http://goggle.com" title="me Consulting" id="range-logo"></a>爲html代碼和以下：

#range-logo { 
    background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg); 
    display:block; 
    height:600px; 
    width:1240px; 
} 

爲CSS代碼。

我能夠實現使背景圖像可點擊，但重複的圖像不是我想要的。我希望圖像可以全屏顯示，不需要重複任何device (responsive)。實現這一點的代碼將會有所幫助。提前致謝。

的jsfiddle：https://jsfiddle.net/qfpqdzk2/

PS：想實現這個WordPress的。

Answer 1

請點擊此鏈接：https://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

#range-logo { 
 
    background-image:url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg); 
 
    display:block; 
 
    height:500px; 
 
    text-indent:-9999px; 
 
    width:613px; 
 
}

<a href="http://midwaycinema7.com/about" title="me Consulting" id="range-logo"></a>

Answer 2

此修復程序是專門針對這一形象，因爲它有一個白色的背景

#range-logo { 
 
margin:0 auto; 
 
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2015/12/home-specialism-section-2.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    display: block; 
 
    max-width:100vh; 
 
    height: 100vh; 
 
    width: 1240px; 
 
}

<a href="http://midwaycinema7.com/about" title="me Consulting" id="range-logo"></a>