Armando Perez, background image not fixed


#1

Hello,

Ref here

I have three issues in this project:
1. the background image moves when scrolling (instead of being fixed)
2. The background image does not take the whole background (I have some grey below)
3. I have some white borders around the thumbnails

See html and css below

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
         	<div class="col-md-4">
            <h2>
              Armando Perez
            </h2>
          </div>
          <div class="pull-right">
            <ul class="nav nav-pills">
              <li class="active"><a href="google.com">All</a></li>
              <li><a href="google.com">Consumer</a></li>
              <li><a href="google.com">Mobile</a></li>
              <li><a href="google.com">Commerce</a></li>
              <li><a href="google.com">Enterprise</a></li>
            </ul>
            
          </div>
        </div>
      </div>
    </div>
    
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
          <div class="col-md-4">
            <a href="google.com" class="thumbnail"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg"/></a>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}

.container {
  width:750px;
}

body {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/armando-perez/brand.jpg);
  background-size:cover;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
	background-attachement: fixed;
	background-position-x: initial;
	background-position-y: initial;
	background-size:100%;
	background-origin: initial;
  background-clip: initial;
  background-color: initial;
  display:block;
}

.header li {
  display: inline;
  margin:6px;
  position:relative;
  width:100px;
  text-align:center;
}

img {
  border:0;
  vertical-align:middle;
  padding:0;
}

* {
  box-sizing: border-box;
}

#2

is this better? You should really check some documentation, you misspelled background-attachment, you have some invalid property's (background-repeat-x and y and same for position.


#3

Thanks a lot. Mistakes understood.

What about the point 3? Do you know what the problem is?


#4

i think they are added by the bootstrap file you use, you use the one of codecademy, use the official from the bootstrap site


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.