Footer na całą szerokość

Question

W jaki sposób rozciągnąć footer z obrazkiem na całą szerokość strony?

Obecnie testowy kod:

<div class="navbar navbar-default clearfix" role="navigation">
    <div class="container">
        <div class="row">
            <div class="imagefooter">
                <img src="sciezka.png" alt="#" width="100%" height="100%" />
            </div>
            {st_get_component module="stSocialLinksFrontend" component="show"}
            {st_get_component module="stWebpageFrontend" component="footerWebpage"}
        </div>
        {st_get_component module="stFrontendMain" component="copyright" params="open='$open'"}
    </div>
</div>

.imagefooter {
 	width: 1267px;
 	height: 100%;
 	margin-bottom: -57px;
 	margin-left: -55px;
 }

 

Answer 1

Czy nie możesz ustawić tego obrazka jako background-image w CSS? Wtedy będziesz mógł nadać  background-size: cover; (a do tego odpowiednio background-position i backgroud-repeat).

Comments

Czyli mniej więcej tak?

<div class="navbar navbar-default clearfix" role="navigation">
    <div class="container">
        <div class="row">
            <div class="imagefooter">
            </div>
            {st_get_component module="stSocialLinksFrontend" component="show"}
            {st_get_component module="stWebpageFrontend" component="footerWebpage"}
        </div>
        {st_get_component module="stFrontendMain" component="copyright" params="open='$open'"}
    </div>
</div>

.imagefooter {
  background-image: url(sciezka/obrazek.png);	
  background-repeat: repeat-x;
 }

 

---

Tak, ale background-repeat: no-repeat; -Twoje tło chyba nie będzie się zgrabnie łączyło w jedną całość po osi X. Pamiętaj, że jeśli będziesz chciał dodać do footera jakieś inne znaczniki z tekstem - a tło footera będzie obrazkiem, to ta treść ułoży się pod obrazkiem (I konieczna będzie zabawa z position: absolute) - dlatego raczej radzę ustawić background image + background-size z cover.