Skip navigation
riccioscrode5
Currently Being Moderated

I want to make my background appear in the same spot and size on every monitor size

Jan 17, 2014 5:06 PM

Hello,

 

I am adding a background to my site, and on my monitor it appears in the right dimentions. However, when I zoom out or in on my monitor the background changes sizes. How do I keep it in one position and the same size the entire time despite the monitor size? Here is my code:

 

<!doctype html>

 

<html>

 

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

@import url("footer.css");

 

 

html {
background-color: #000000;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000;
background-image: url(Background.jpg);
}

.footer p a {

color: #CCC;

}

 

body {
width: 1041px;
margin: auto; /* keeps the page centered */
font-family: Arial, Helvetica, sans-serif;
padding-top: 0px;
background-repeat: no-repeat;
background-color: #000;
background-attachment: fixed;
}

 

a {

 

    color: #8A0404;

 

    text-decoration: none;

 

}

 

a:hover {
color: #FFFFFF;
}

 

.header {
height: 150px;
background-image: url(headernew.png);
width: auto;
float: none;
background-color: #000;
background-repeat: no-repeat;
padding-top: 0px;
clip: rect(auto,auto,auto,auto);
}

 

.header .nav {
width: 450px;
float: right;
margin-top: 55px;
text-align: right;
}

 

.header .nav span {

 

    font-size: 12px;

 

    font-weight: bold;

 

    color: #8a0404;

 

    margin-left: 25px;

 

}

 

.navbar {
background: #FFFFFF;
line-height: 35px;
margin: auto;
width: 170px;
float: right;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
bottom: 120px;
position: relative;
height: 55px;
right: 55px;
}

 

.navbar .nav {

 

    width: 50%;

 

    float: left;

 

}

 

.content {
background: #FFFFFF;
}

 

.aside {
width: 330px;
float: right;
color: #8a0404;
padding-top: 10px;
background-color: #000000;
}

 

.section.main {
background: #FFFFFF;
width: 700px;
float: left;
bottom: 0px;
padding-bottom: 15px;
}

 

.article {
min-height: 400px;
text-align: justify;
background-color: #FFFFFF;
background-repeat: repeat-y;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
}

 

.centertxt {

 

    text-align: center;

 

}

 

.righttxt {

 

    text-align: right;

 

    padding-right: 15px;

 

}

 

img.center {

 

    display: block;

 

    margin: auto;

 

}

 

.section.main .article h3 {
text-align: center;
font-style: italic;
color: #97222B;
font-size: 30px;

}

.footer {
font-size: 11px;
text-align: center;
width: 100%;
background-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
position: relative;
left: 0px;
bottom: 0px;
clear: both;
color: #CCC;
border-bottom-width: 2px;
border-bottom-style: solid;
margin-right: auto;
margin-left: auto;

}

.signature {

position: relative;

}

</style>

<link rel="stylesheet" href="dakevid_videolb/overlay-minimal.css"/>

<link rel="stylesheet" type="text/css" href="banner_files/banner-rotator.css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<link href="footer.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script type="text/javascript" src="banner_files/jquery.banner-rotator.min.js"></script>

<script type="text/javascript">

$(window).load(function() {
$("#JQBannerRotator2").fdBannerRotator({keyboardEnabled:true,frameShad owEnabled:true,slideWidth:700,slideHeight:300,slideScaleMode:"none",sl ideTransition:{type:"fade",duration:300,easing:"easeOutQuad"},slideDur ation:3000,slideAutoplay:true,slidePauseOnHover:true,timerPosition:"to p",timerVisible:false,captionAnimationSpeed:500,captionAnimationEasing :"easeOutQuad",controlDirectionEnbled:true,controlDirectionHide:true,c ontrolPlayEnabled:true,navigationEnabled:true,navigationPositionTop:24 0,navigationPositionMargin:10,navigationAlign:"right",navigationThumbE nabled:true,navigationThumbServerScipt:"",navigationThumbSearch:".jpg" ,navigationThumbReplace:"_thumb.jpg",navigationThumbWidth:150,navigati onThumbHeight:65,navigationThumbAnimationSpeed:200,navigationThumbAnim ationEasing:"easeOutQuad"});
});

</script>

<body marginwidth="auto" marginheight="auto">

 

<div class="header"></div>

<ul id="MenuBar1" class="MenuBarHorizontal">

  <li><a href="index.html">Home</a></li>

  <li><a href="about.html">About</a></li>
  <li><a href="news.html">News</a></li>
  <li><a href="http://www.xcelonlinestore.com/collections/kyle-dake-official-merchand ise" target="_new">Merchandise</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Media</a>
    <ul>
      <li><a href="video_gallery.html">Videos</a></li>
      <li><a href="photo_gallery.html">Photos</a></li>
    </ul>
  </li>
  <li><a href="events.html">Events</a></li>
  <li><a href="sponsors.html">Sponsors</a></li>
  <li><a href="representation.html">Representation</a></li>
  <li><a href="contact.php">Contact</a></li>
</ul>

<div class="navbar"><iframe src="http://free.timeanddate.com/countdown/i3zg3ync/n35/cf12/cm0/cu3/ct0/cs 0/ca0/cr0/ss0/cacfff/cpc000/pc000/tcfff/fs90/szw320/szh135/tatCountdow n%20To/tacfff/tptTime%20since%20Event%20started%20in/tpc000/matThe%20W orld%20Championships/macfff/mpc000/iso2014-08-26T00:00:00/pa5" frameborder="0" width="214" height="75"></iframe>

 

</div>

<div class="content">

 

    <div class="section main">
      <div id="JQBannerRotator2" class="JQBannerRotator">
        <div class="overlay"></div>
        <ul class="data">
          <li><img class="slide" src="banner_files/slides/lansing.jpg" alt=""/></li>
          <li><img class="slide" src="banner_files/slides/eiwa.jpg" alt=""/></li>
          <li><img class="slide" src="banner_files/slides/coaching.jpg" alt=""/></li>
        </ul>
      </div>

<div class="article">

 

  <h3>Welcome to KyleDake.com</h3>

 

      <p><img src="test.png" width="323" height="441" hspace="20" align="left">Hey Guys! Thanks for visiting my website. I hope you find what you are   looking for, whether it be clothes and merchandise, information, or   inspiration! I want to thank you for supporting me and my dreams as I am   chasing them down every day. The fans are one of the most important   parts of what I do, I hope everything I have done and will do benefits   someone somewhere. Make sure you are chasing your dreams every second   you breathe.<span class="signature"><img src="Signature2.png" width="203" height="109" align="right"></span></p>
      <p> </p>

</div>

 

  </div>

 

<div class="aside">Follow Kyle on Twitter | Check out Kyle's Facebook Page</div>

 

  <div class="aside">

<p class="righttxt"> </p>
<p class="righttxt"><a class="twitter-timeline"  href="https://twitter.com/kyledake444"  data-widget-id="423108832919695363">Tweets by @kyledake444</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http ':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js. src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore (js,fjs);}}(document,"script","twitter-wjs");</script>

 

</p>

 

  </div>

 

</div>

 

<div id="footer">
 
</div>

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

 

<div class="footer">

  <p>All Rights Reserved 2013 X-Cel Worldwide | © Kyle Dake 2013 | This is the official Kyle Dake Website | Web Design <a href="http://www.riccioproductions.com/" target="_new">Riccio Poductions</a> | </p>

<a href="http://www.cfathletic.com/" target="_new"><img src="cf.png" width="83" height="40" border="0"></a><a href="http://www.milwaukeetool.com/" target="_new"><img src="mil_tools.png" width="81" height="55" border="0"></a><a href="http://www.ai-sport.com/ai-performance/ai-performance-wrestling" target="_new"><img src="ai_wrestling.png" width="228" height="47" border="0"></a></div>

</body>

 

</html>

 

 

 

Thanks!!

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points