Problem with image size and position: fixed

0

I can not put these large images with neither position fixed. They change in size when I try and the page deforms. link

.container-fluid {
  background-color: #E6E8FA;
  
}

#myname {
  background-color:#B0C4DE;
  font-family:Paytone One;
  color:#4A777A;
  margin-right:800px;
  margin-left:50px;  
  }
header.cabeca a#myname:hover {
  background-color:blue;
  color:white;
}
#leftlist {
  background-color: #AEEEEE;
  }
ul#leftlist a.home:hover {
  background-color:blue;
  color:white;
}
ul#leftlist a.sobre:hover {
  background-color:blue;
  color:white;
}
ul#leftlist a.portf:hover {
  background-color:blue;
  color:white;
}
ul#leftlist a.cont:hover {
  background-color:blue;
  color:white;
}

.text-center {
  margin-top: -700px;
}

.text-center h1 {
  font-family: Paytone One;
  font-size: 60px;
  color: white;
  text-shadow: 5px 5px 10px black;
}

.text-center h3 {
  font-family: Nothing You Could Do;
  font-size: 40px;
  color: black;
  text-shadow: 5px 5px 10px white;
}

#firstpage {
  margin-top: -22px;
    }
.fixed{
  
  }

#buttonsfp {
  margin-left: 350px;
  margin-top: 30px;
  font-family: Holtwood One SC;
}
div#buttonsfp a.face:hover {
  color:white;
  background-color:blue;
}
div#buttonsfp a.insta:hover {
  color:white;
  background-color:blue;
}
div#buttonsfp a.code:hover {
  color:white;
  background-color:blue;
}
div#buttonsfp a.cpen:hover {
  color:white;
  background-color:blue;
}

#secondpage {
  margin-top: 400px;
  
}

#myself {
  margin-top: -3200px;
  margin-left: 900px;
  border-radius: 50%;
  width:400px;
}

.atitle {
  margin-top: -1650px;
  font-family: Tangerine;
  font-size: 70px;
  text-indent: 90px;
}

p {
  text-indent: 30px;
  font-size: 20px;
  font-family: Rokkitt;
  text-align:justify;
  margin-left:20px;
  
}
.mself{
  text-decoration:underline;
  font-size:30px;
}
article#me a:hover {
  color:red;
}
.cl1{
  border-right:2px black solid;
  margin-right:-15px;
}

#thirdpage {
  margin-top: 350px;
}
.titulo h1{
  margin-top:-750px;
  font-family:Paytone One;
  font-size:100px;
  color:white;
  text-shadow: 5px 5px 10px black; 
  
}

div.thumbnail.trans{
  background-color:transparent;  
  margin-top:-610px;   
  
}
.thumblong{
  width:400px;  
}


.caption{
  background-color:#D0D0D0 ;
}
.caption h3{
  margin-left:50px;
  margin-top:-5px;
  text-shadow: 1px 1px 1px white;
  color:black;
}
.caption p{
   text-indent: 15px;
  font-size: 15px;
  font-family: Rokkitt;
  text-align:justify;
  margin-left:5px;  
  color:black;
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
<nav>
<div class="navbar navbar-default" >
  <div class="navbar-fixed-top container-fluid">
    <div class="navbar-header">
     <header class="cabeca"> 
      <button type="buton" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>       
      <a class="navbar-brand" href="http://www.youtube.com/longabordo" target="_blank" id="myname"> Eric Murta</a>      
    </div>
    <div class="collapse navbar-collapse" id="mynavbar-content">    
      <ul class="nav navbar-nav" id="leftlist">
        <li><a href="#social-media " class="home" >Home</a></li>
        <li ><a href="#me" class="sobre">About</a></li>
        <li><a href="#recentworks" class="portf">Portfolio</a></li>
        <li><a href="#"class="cont">Contact</a></li>
      </ul> 
      </header>
    </div>
  </div>
</div>
</nav>

<section class="pages">
  <article id="social-media">      
          <img src="https://images.unsplash.com/photo-1441035636554-212b9d7497fb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d0a88730a149920879eac5314d426256"class="img-responsive" id="firstpage">    
    <header class="text-center">       
      <h1>Eric Murta Portfolio Webpage</h1>
      <h3>Shaping your Webface.</h3>      
    </header>
    <!--Buttons-->
    <div id="buttonsfp">
      <a href="http://www.facebook.com/ericmurta" target="_blank" class="btn btn-default btn-lg face" > Facebook</a>
      <a href="http://www.instagram.com/ericmurtinha" target="_blank" class="btn btn-default btn-lg insta"> Instagram</a>
      <a href="http://www.freecodecamp.com/murtinha" target="_blank" class="btn btn-default btn-lg code"> freeCodeCamp</a>
      <a href="http://codepen.io/murtinha/" target="_blank" class="btn btn-default btn-lg cpen">CodePen</a>      
    </div>
  </article>
  <article id="me">   
    <img class="img-responsive" id="secondpage"src="https://images.unsplash.com/photo-1454367234670-bf0854963195?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=65cb413a1fc7cd9fed33f9f0197dea9d"><imgid="myself" src="https://fbcdn-photos-e-a.akamaihd.net/hphotos-ak-xta1/v/t1.0-0/q90/p206x206/12670576_960670440654472_6445109868176369830_n.jpg?oh=a3f6079008a9a0c988bf67ef0b482b33&oe=5793BACE&__gda__=1469050867_4f54ab9fd937a4f9b93c09a3ae3da0b0"></a><h1class="atitle"> A little background. </h1> 
  <div class="row">         
         <div class="col-lg-4 cl1">
            <p> My name is Eric and I'm 23 years old. I'm an unemployed electrical engineering that is now studying web development by <a href="http://www.freecodecamp.com/murtinha" class="mself" target="_blank">myself</a>. Things I really like doing are longboarding, playing guitar and hanging out with my friends. I had some programming lessons on my graduation that really helped me with algorithms and progamming logics.</p>
         </div>
         <div class="col-lg-4">
            <p>I learned C language but now I've decided to study some fronted stuff like HTML5, CSS, JS. I hope to finish my CodeCamp course and so far I've learned a lot!</p>
         </div>
  </div>
  
    
  </article>
  <article id="recentworks">
    <img class="img-responsive" id="thirdpage"src="https://images.unsplash.com/photo-1430165558479-de3cf8cf1478?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a8d560cd877f002980248703b48efff0"><divclass="row">
        <div class="col-lg-1 col-lg-offset-4 titulo">
        <h1>Portfolio</h1>
        </div>    
    </div>
    <div class="row">
        <div class="col-lg-3 col-lg-offset-1">
         <div class="thumbnail trans"> 
          <img class="thumblong"src="https://scontent-gru2-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1527000_687005504678183_968808326_n.png?oh=3c1d02ec03bde0dad99ce9f87bd76719&oe=575A2CAA"><divclass="caption"><h3>Youtube Channel</h3>
             <p>That's my Youtube Channel where I post videos about longboarding. There are video reviews, trip videos, videos with my friends,trick tip videos and more.</p></div>           
           </a>
        </div>
        </div>
      </div>

  </article>
</section>
    
asked by anonymous 08.03.2016 / 18:16

0 answers