Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    40
    Thanks
    14
    Thanked 0 Times in 0 Posts

    How to use two backgrounds with one opaque

    I'm trying to use two different backgrounds where on is transparent. I cant seem to get it right.
    What the problem is with the html tag. If I don't have height:300%; then for some reason the background image in body wont cover the whole page. Why is this?


    Here is what I have
    Code:
    html{
    background:url(images/6hkuzy8.png) repeat black;
    height:300%;
    width:100%;
    opacity:0.9;
    }
    
    
    body {margin: 0px;padding: 0px;border: 0px;font-family:Arial, Helvetica, sans-serif;	 color:#666;
    background: linear-gradient(to bottom, white 25%,black) ;
    height:100%;
    width:100%;
    text-outline: 2px 2px #ff0000;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Your not using two back ground images. Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    body {
    	margin: 0px;
    	padding: 0px;
    	border: 0px;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#666;
    }
    #container{
    	height: 300px;
    	width: 300px;
    	margin: 0 auto;
    	background: linear-gradient(to bottom, white 25%,black);
    }
    p{
    	position:relative;
    	top: -300px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="main">
    	<img src="images/6hkuzy8.png" height="300px;" width="300px;" style="opacity:0.5;" />
    		<p>Some words to live by.</p>
    	</div>
    </div>
    </body>
    </html>
    Last edited by sunfighter; 09-07-2013 at 04:34 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    cpamieta (09-07-2013)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by cpamieta View Post
    I'm trying to use two different backgrounds where on is transparent. I cant seem to get it right.
    What the problem is with the html tag. If I don't have height:300%; then for some reason the background image in body wont cover the whole page. Why is this?
    The body element has a magical property where its backgrounds propagate to the viewport (or apply to the page as a whole, in plainer English). Normally, that's supposed to happen for the root (outermost) element, which in the case of HTML is the html element. If you apply a background to the html element, the body element loses its magicness and is treated like a normal element. And like normal elements, if it has no content, you won't see the background.

    In this case, I'm guessing you're trying to style an empty HTML page or a page containing nothing but elements with float: left and float: right, so the body element won't show a background unless it has a height specified.

    That's where the other issue comes in. Percentage heights have no effect unless that percentage is based on a fixed height of an ancestor element. This rule doesn't apply to the root (html) element which just bases the percentage off of the browser viewport height. So, if the html element has a height, the body element bases its percentage-based height on the html element's height. If the html element does *not* have a height, then the body element has nothing to base its percentage-based height off of and therefore, the height you specified gets ignored. If there's nothing in the body element (except maybe floats), then the body element will have no height and your background will be missing.

    That said, you'd be best off merging your backgrounds that way they can both take advantage of the magicness of the html element:

    Code:
    html { background: black url("images/6hkuzy8.png"), linear-gradient(white 25%, black); }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    cpamieta (09-07-2013)

  • #4
    New Coder
    Join Date
    May 2013
    Posts
    40
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks for the info, ill try it out


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •