#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    7
    Rep Power
    0

    Question Background Image problems


    Hi all, I'll start with my goal then explain the problems I'm running into, then my code.

    I currently have a 1920x1080 image I created specifically for this site's background. Assuming I'm wording this right, I want it fixed to the bottom of the page, meaning you have to scroll down to see it if you're on a smaller resolution or browsers been resized ect., and anything that exceeds the div's (content box) length will 'bottom out' so to speak and stay fixed on that portion of the image on the bottom of the image, meaning it doesn't show anything blank past the image no matter how far the content extends vertically. As far as the width goes, I'm not too worried whether they see the whole thing, as it's really just a background of space, but for it to be centered, and for them to see more only if their resolution is up to par, without forcing them to scroll left or right just to see it.

    Now my problems.

    1) I had a margin of 8px all around the body? I never threw that in the body, and true I can put a margin of 0 in the body element, I didn't think I should have too considering I never specified it to have a margin to begin with. Is this normal?

    2) If I set the background-size to 100%, then it shrinks the image down to fit the screen, not what I was expecting, though I do want it to show the full height regardless of resolution.

    3) If I set the background-attachment to fixed, with size set to auto; then it does just that, fixing it to the page starting from the top of the image, meaning you'll never see anything else regardless of how much you scroll down.

    4) If I remove the background-attachment with size set to auto; then it will allow you to scroll down to see the image, but if the content exceeds the images height then it will show the backup background-color of black, which is what I don't want to happen.

    I hope all of this has made sense so far. What am I missing here? I've tried various combinations none of which seem to work. Below is the related Image, then CSS code followed by the HTML.



    Code:
    html, body
    {
    	height: 100%;
    	min-height: 100%;
    	margin: 0;
    } 
    header
    {
    	border: 1px 0 solid white;
    	height:300px;
    	width: 100%;
    	padding: 30px 0px;
    	margin-bottom: 30px;
    	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 44%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 44%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    
    }
    
     body
    {
    	background-color: #000;
    	background-image: url("images/alpha.png");
    	background-repeat: no-repeat;
    	background-size: auto;
    	font-family: arial, verdana, sans-serif;
    }
     section
    {
    	border: solid white;
    	vertical-align: middle;
    	max-width: 50%;
    	color: white;
    	margin: auto;
    	margin-bottom: 45px;
    	padding-right: 15px;
    	padding-left: 15px;
    	padding-bottom: 25px;
    	background: #2c3e50; 
    	background-image: url ("");
    	background-position: fixed;
    	background-repeat: no-repeat;
    	min-height: 75%;
    	max-height: 200%;
    	overflow: auto;
    	opacity: .90;
    }
    
     h1
    {
    	margin-bottom: 5px;
    	left: 50px;
    	color: #ECF0F1;
    	font-size: 25px;
    	text-shadow: #34495E 1px 1px;
    }
    
     .content
    {
    	max-width: 80%;
    	text-align:justify;
    	margin: 0 auto;	
    	background-color: transparent;
    }
    
    .content p
    {
    	padding: 5px 15px;
    }
     a
    {
    	color: white;
    	text-decoration: none;
    	text-shadow: #34495E .5px .5px;
    	font-weight: bold;
    }
    /*****End Main Content*****/
    
    /*****Navigation*****/
     nav
    {
        
    	font-size: 18px;
    	background: #4B79A1; /* fallback for old browsers */
    	background: -webkit-linear-gradient(to bottom, #4B79A1 1% ,#83E51 100%); /* Chrome 10-25, Safari 5.1-6 */
    	background: linear-gradient(to bottom, #4B79A1 1%,  #283E51 100%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */        
        margin: 0 auto;
    	padding: 0 auto;
        text-align: center;
        max-width: 40%;
       /* fallback height:50px;
    	border: 1px solid navyblue;
    	border-radius: 100px 100px 50px 50px; */
    }
     .inline-list
    {
        display: -webkit-inline-box;
        list-style: none;
        padding: 0px;
    }
    
     nav li a
    {
        padding: 10px 15px;
        margin: auto;
        font-size: 18px;
    	font-weight: normal;
        text-decoration: none;
        color: #ECF0F1;
    }
      
     nav li a:hover
    {
        color: #FF2B2B;
       /* text-shadow: -1px .5px .5px #000000; */ /*Maybe Change Later*/
    	}
    
     nav li a:active
    {
    	color: #D2D7D3;
    }
    /*****End Navigation*****/
    
    /*****Footer******/
     .disclaimer
    {
    	font-size: 11px;
    	color: #ECF0F1;
    	text-align:center;
    	margin-top: 50px;
    	margin-bottom: 5px;
    }
    
     footer a
    {
    	color: #ECF0F1;
    	text-decoration: none;
    	text-shadow: #34495E .3px .3px;
    	margin-bottom: 5px;
    }
    And the HTML (please note I just used a random Lorem Ipsum generator, I apologize about the language as it was used to quickly exceed the image's height in content.

    Code:
    <!doctype html>
    <html lang="en" class="no-js">
    <head>
    <meta charset="utf-8">
    <title>Operation Meteor</title>
    <link rel="stylesheet" type="text/css" href="theme/main.css">
    </head>
    <body>
    <header>
     <nav> <!--Background used as reference-->
      <ul class="inline-list">
       <li class="nav01"><a href="#">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="team.html">Team</a></li>
       <li><a href="#">Files</a></li>
       <li><a href="#">Links</a></li>
       <li><a href="gallery.html">Gallery</a>
       <li class="nav05"><a href="phpbb3/index.php">Forum</a></li>
     </nav>
    </header>
     <section roll="main">
    	<div class="content-header">	
    		<h1>News</h1>
    		</div>
    			<div class="content">
    				<!-- start slipsum code -->
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
    
    <p>Normally, both your asses would be dead as ****ing fried chicken, but you happen to pull this **** while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much **** this morning over this case to hand it over to your dumb ***. </p>
    
    <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass mother****in' house, ****in' up the way the ****** talks. Mother****er do that **** to me, he better paralyze my ***, 'cause I'll kill the mother****er, know what I'm sayin'? </p>
    
    <p>My money's in that office, right? If she start giving me some bull**** about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, mother****er. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first mother****er to get shot. You understand? </p>
    
    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
    
    <p>Normally, both your asses would be dead as ****ing fried chicken, but you happen to pull this **** while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much **** this morning over this case to hand it over to your dumb ***. </p>
    
    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
    
    <p>Normally, both your asses would be dead as ****ing fried chicken, but you happen to pull this **** while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much **** this morning over this case to hand it over to your dumb ***. </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
    
    <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that ****? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that ****.  </p>
    
    <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
    
    <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass mother****in' house, ****in' up the way the ****** talks. Mother****er do that **** to me, he better paralyze my ***, 'cause I'll kill the mother****er, know what I'm sayin'? </p>
    
    <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that ****? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that ****.  </p>
    
    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
    
    <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
    
    <p>My money's in that office, right? If she start giving me some bull**** about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, mother****er. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first mother****er to get shot. You understand? </p>
    
    <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
    
    <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that ****? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that ****.  </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
    
    <!-- end slipsum code -->
    					
      </div>
     </section>
    <footer class="disclaimer"> OP:M 2016 - Site by Davex</footer>
    </body>
    </html>
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Davex,

    try it like this...

    Code:
    
    html, body {
        margin: 0;
     } 
    body {
        background-color: #000;
        background-image: url(images/alpha.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0 bottom;
        font-family: arial, verdana, sans-serif;
     }

    coothead

    Comments on this post

    • Davex agrees : Thanks for the help!
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    7
    Rep Power
    0
    Hi Coothead, thanks for the input.

    The 2 problems I had with that is, by setting the background-size to 100% it shrinks it down to my screen size, displaying the entire image. Secondly by setting the position to bottom, everything from the top of the page, to the top of the image is black, therefore it's not really scrolling with the element.
    I tried adding background-attachment: scroll; and fixed, but it still leaves the empty black space both above or below the image depending on if I remove the background-position.
  6. #4
  7. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,126
    Rep Power
    4103
    Is this the effect you are after? I'm not too clear on what it is you want.


    Originally Posted by Davex
    1) I had a margin of 8px all around the body? I never threw that in the body, and true I can put a margin of 0 in the body element, I didn't think I should have too considering I never specified it to have a margin to begin with. Is this normal?
    Browsers have default styles for various elements. For example <strong> being bold, <em> being italic. Margin on the body is one of those defaults. These differing defaults are why some people use reset stylesheets to try and get everything to even ground before applying custom styles.

    Applying height: 100% to the body tag means it is fixed to the height of your browsers view port. As a result your background image is also fixed to that height, but the page can scroll beyond that if the content is too long making it overflow the body element.

    Removing the height allows body to scale to the size of the content which in turn permits the background image to always be positioned at the bottom of the page.

    Comments on this post

    • Davex agrees : Thanks for the help!
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    7
    Rep Power
    0
    Originally Posted by kicken
    Is this the effect you are after? I'm not too clear on what it is you want.



    Browsers have default styles for various elements. For example <strong> being bold, <em> being italic. Margin on the body is one of those defaults. These differing defaults are why some people use reset stylesheets to try and get everything to even ground before applying custom styles.

    Applying height: 100% to the body tag means it is fixed to the height of your browsers view port. As a result your background image is also fixed to that height, but the page can scroll beyond that if the content is too long making it overflow the body element.

    Removing the height allows body to scale to the size of the content which in turn permits the background image to always be positioned at the bottom of the page.

    No, and sorry I can't clarify exactly I'm not too sure how to word it, but here is an example of what I mean.
    https://esforces.com/
    Notice how you start with the top of the image, and then you scroll down a little the background also scrolls down, until you obviously hit the bottom of it, but it stays fixed regardless of how much you keep scrolling down.

    As for the explanations, thanks!
  10. #6
  11. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,126
    Rep Power
    4103
    They use Javascript to achieve that effect. They dynamically adjust the background-position style based on how far down you've scrolled.

    You might be interested in looking at Parallax.js
    Last edited by kicken; November 24th, 2017 at 01:26 AM.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud

IMN logo majestic logo threadwatch logo seochat tools logo