Background Image won't move, how to center everything? - html

Question

I made a second background image but no matter what elements I change it doesn't seem like I can position it at all. On top of that when I go into Chrome and use inspect then remove the layer it doesn't disappear?
And another problem I'm having is trying to figure out what code I need to change to get everything centered in the page layout. Like do I just have the numbers wrong or something?
If anyone could help me out I would be super grateful.
My Code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
#HeaderBike {
background-image: url(..img/HeaderBike.png);
background-repeat: no-repeat;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */
form div {
/*Margin Header */
48px;
float: left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float: left;
}
.site-navigation ul {
width: 600px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
margin: left;
margin-top: 115px;
padding-bottom: 42px;
float: left;
text-align: left;
}
h1 {
text-align: left;
}
.SearchGlass {
margin: -142px 900px;
float: left;
}
/* Class For Articles*/
.article {
float: left;
width: 100%;
margin-bottom: 72px
}
.article img {
width: 20%;
margin-right: 1%
}
.article h1 {
float: left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p {
float: left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer {
display: block;
width: 100%;
float: left;
}
.search {
margin: -141px 1125px;
float: left;
}
.RoadToYellow {}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
</div>
</ul>
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<input id="search" type="text" name="search" placeholder="search"><br>
</div>
<div id="HeaderBike">
<img src="img/HeaderBike.png" alt="Dude on a bike">
</div>
</nav>
</form>
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky!-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="article">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
What its suppose to look like
Vs.
What Mine Looks Like

Answer 1

Try using: background-size: cover;
What this will do is amplify the image enough so it covers the container is in.
Also, if you want to center the image you can use: background-position: center;
At the end it would look something like this:
#HeaderBike {
background-image: url(..img/HeaderBike.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}
Or more simplified:
#HeaderBike {
background: url(..img/HeaderBike.png) no-repeat cover center;
z-index: 1;
float: left;
position: absolute height: 155px;
width: 155px;
}

Answer 2

Different approach (with flexbox)
Structure HTML
<!-- Header with logo, links and search -->
<header></header>
<!-- Intro section -->
<section></section>
<!-- Main with images and articles -->
<main></main>
<!-- Footer with customers and navigation -->
<footer></footer>
Think in sections, columns and rows.
<div class="section>
<div class="row">
<div class="column"></div>
</div>
</div>
Be consistent!
Give each section the padding you want. Make a row with
.row {
display: flex;
}
and a column with
.column {
flex: 1
}
so that every column has the same width.
Center horizontally and vertically as follows:
/* Center vertically */
.v-centered {
align-items: center;
}
/* Center horizontally */
.centered {
justify-content: center;
}
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
}
.text-center {
text-align: center;
}
header {
background: #49B2CB;
}
header a {
color: white;
}
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
.section {
padding: 3rem 1.5rem;
}
/* Make header and footer padding not as big as normal */
header.section,
footer.section {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
/* Row, centering, wrapping */
.row {
display: flex;
margin: 0 -0.75rem;
}
.row.v-centered {
align-items: center;
}
.row.centered {
justify-content: center;
}
.row.wrap {
flex-wrap: wrap;
}
.row>.column {
flex: 1;
}
.row>* {
padding: 0.75rem;
}
/* Navigation */
ul.nav {
padding: 0;
margin: 0;
list-style: none;
}
ul.nav li {
float: left;
padding: 5px;
}
ul.nav a {
color: #797979;
}
/* Buttons */
.btn {
text-decoration: none;
display: inline-block;
padding: 0.5rem;
border-radius: 0.5rem;
color: white;
}
.btn.light {
background: #49B2CB;
}
.btn.dark {
background: #000000;
}
/* Intro */
.intro {
background-image: url(http://lorempixel.com/960/400/sports/1);
color: white;
text-align: center;
}
.intro h1 {
font-size: 3rem;
margin: 0;
}
/* Main */
main h2 {
margin: 0.5rem 0;
}
/* Make main images responsive */
main img {
display: block;
height: auto;
max-width: 100%;
}
/* Footer */
footer figure {
margin: 0;
}
footer .nav {
text-align: center;
}
#media screen and (max-width: 767px) {
main .row {
flex-direction: column;
}
}
<div class="container">
<header class="section">
<div class="row v-centered centered">
<div class="column"><img src="http://via.placeholder.com/200x50?text=TEAM-SKY" alt=""></div>
<div class="column text-center">shop</div>
<div class="column text-center">checkout</div>
<div class="column text-center">video</div>
<div class="column"><input type="text" placeholder="Search ..."></div>
</div>
</header>
<section class="section intro">
<div class="row v-centered">
<div>
<h1>Team Sky</h1>
<p>the road to yellow</p>
shop team sky
</div>
</div>
</section>
<main class="section">
<h2>TEAM NEWS</h2>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat eligendi voluptas voluptate ut distinctio aspernatur perferendis minima, repellendus consequatur, incidunt, velit ipsum est suscipit veniam fugiat tempora, rem dolore! Commodi?</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, reiciendis dolor nulla maiores! Eaque quaerat quas optio quam odio inventore totam odit nobis blanditiis facere iure rem, praesentium et similique.</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore illo mollitia consequatur laborum nulla, eos incidunt iusto explicabo voluptate molestias dolorum dolores, at, dolor temporibus ex tenetur quaerat, ducimus sequi.</p>
More
</article>
</div>
</div>
<div class="row">
<div class="column"><img src="http://via.placeholder.com/400x200" alt="">
</div>
<div class="column">
<article>
<h3>Heading 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit amet odio quaerat sit voluptates aut quisquam tempore ipsa repellat ipsam atque deserunt, quis voluptatum quos aliquid laudantium dolorum accusamus.</p>
More
</article>
</div>
</div>
</main>
<footer class="section">
<div class="row centered wrap">
<figure><img src="http://via.placeholder.com/100x50?text=Customer 1" alt="">
</figure>
<figure><img src="http://via.placeholder.com/150x50?text=Customer 2" alt="">
</figure>
<figure><img src="http://via.placeholder.com/75x50?text=Customer 3" alt="">
</figure>
<figure><img src="http://via.placeholder.com/100x50?text=Customer 4" alt="">
</figure>
<figure><img src="http://via.placeholder.com/200x50?text=Customer 5" alt="">
</figure>
</div>
<div class="row centered">
<ul class="nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</footer>
</div>