CODEWITHSUNDEEP
htmlcsswordpress
danula
danula

Reputation: 3

Footer CSS problems

I'm making a Wordpress Theme but I have a little problem with the footer. I want it to occupy the 100% of the window, but it only occupies 1200px. I don't know why it's shown like that. Here you have the CSS Code

#navigationposition {
    float:left;
    color:#fff;
    width: 100%;
    height:200px;
    position:relative;
    bottom:0;
    left:0;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}

Here's the link to the website

Upvotes: 0

Views: 83

Answers (4)

Mohan Krishna Shrestha
Mohan Krishna Shrestha

Reputation: 1

use position absolute and height:100vh. it seems done with this

Upvotes: 0

hyakk1
hyakk1

Reputation: 21

Your footer is inside a div#container with a 1200px width. Move out your div#navigationposition from the div#container and it should be alright ;)

Upvotes: 0

robjez
robjez

Reputation: 3788

Your div id=#container restraints the footer to not exceed 1200px. This is happening here :

#container {
max-width: 1200px;
background-color: transparent;
margin: 0 auto;
}

You can either take the content of your footer out of the container or remove max-width:1200px from container rule.

Hope this help.

Upvotes: 1

Paulo Pta
Paulo Pta

Reputation: 48

This means that you are placing this div ( navigationposition ) inside another one which has a fixed width, and is limiting your DIV. If you cannot access to the code that is framing yours, ( few websites don't let you change container ) then the only possible way I think is to make this DIV ( navigationposition ) absolute with bottom=0 ( the result wont be the same when you scroll) If you can haveaccess to all code, then change the width of the div that contains the div ( navigationposition ) 

/*if you can change it*/

#container {
  /*width:1200px;*/
  width:100%;
}

  /*Only if you cannot change its container*/

#navigationposition {
  float:left;
  color:#fff;
  width: 100%;
  height:200px;
  position:absolute;
  /*position:relative;*/
  bottom:0;
  left:0;
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}

Upvotes: 0

Related Questions