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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    Background image is hiding from me! :(

    Hey, i'm having a bit of an issue with getting the background image of the "image_container" div to show... Basically this website it to have two images, one in the background of a div, and one an image with a div infront of that so text and content can be added.

    Need the two images so that the front one can be faded out, then switched to another one. Then it will fade back in after afew seconds. The background picture of the div will then change.. this loops.

    I could also to with a better way to center the entire container instead of using percentages as they do not work very good.

    http://i58.photobucket.com/albums/g2...ge_no_work.jpg

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Discount Koi</title>
    <
    style type="text/css">
    body {
        
    background-color:#2b2b2b;
        
    background-imageurl(images/background_gradient.jpg);
        
    background-repeat:no-repeat;
        
    background-size:60%;
    }
    .
    main_content_container {
        
    position:absolute;
        
    width:810px;
        
    height:500px;
        
    margin:215%;
    }
    .
    main_content {
        
    background-color:#003366;
    }
    .
    social_icons text-align:rightmargin-bottom:4px; }
    .
    icon {
        
    background-image:url(images/social_icons.png);
        
    height:27pxwidth:27px;
        
    display:inline-block;
    } .
    icon img visibility:hidden; }
    .
    twitter background-position:0px 0px; } .twitter:hover background-position:0px -27px; }
    .
    rrs background-position:27px 0px; } .rrs:hover background-position:27px -27px; }
    .
    facebook background-position:54px 0px; } .facebook:hover background-position:54px -27px; }
    .
    content_container {
        
    background-size:100%;
        
    background-repeat:no-repeat;
        
    position:absolute;
    }
    .
    shadow {
        
    position:absolute;
        
    bottom:;
        
    margin-top:110%%;
    }
    .
    content_container {
        
    width:100%; height:100%;
        
    position:absolute;
    }
    .
    image_container img {
        
    position:absolute;    
    }
    .
    image_container {
        
    background-image:url(images/backgrounds/hamster.jpg);    
    }
    h1 {
        
    font-family:Trebuchet MS;
        
    font-weight:100;
        
    color:#FFFFFF;
        
    font-size:28px;
        
    margin:20px;
        
    padding-left:20px;
        
    background-repeat:no-repeat;
        
    background-image:url(images/header_side.gif);
    }
    </
    style>
    <
    script type="text/javascript">
    //This function fades images in and out for the home page. Make sure it is activated again when page is reloaded using AJAX. 
    function bg_fader() {
        
    //Elements to swap images with 
        
    var elm1 "image1";
        var 
    elm2 "image_container";
        
        
    //document.getElementById(elm2).style.backgroundImage="";
    }
    </script>
    </head>
    <body>
    <div class="container">
        <div class="main_content_container">
            <div class="social_icons">
                <a href="#"><div class="icon twitter"><img src="images/icon_buffer.gif"></div></a>
                <a href="#"><div class="icon facebook"><img src="images/icon_buffer.gif"></div></a>
                <a href="#"><div class="icon rrs"><img src="images/icon_buffer.gif"></div></a>
            </div>
            <div class="image_container">
                <!--<img src="images/backgrounds/snake.jpg" width="810px" id="image1" />-->
                <div class="content_container" id="image2">
                     <h1>Discount Koi & <br />Aquatics</h1>
                </div>
            </div>
            <img src="images/background_shadow.jpg" width="100%" class="shadow" />
        </div>
    </div>
    </body>
    </html> 

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello martynball,
    By absolutely positioning .content_container you remove that element from the natural flow of the document. That means it has no affect on it's containing .image_container like you're expecting it to.

    That means you either need to give .image_container absolute sizes or find another way to position .content_container.

    Myself, I avoid ap until it's absolutely necessary. Not sure in your case but I think you could do without? A link to a test site so we have the images would sure help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    martynball (01-27-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    I'm afraid I don't have the website hosted live, it's all local. Basically what should be happening is this:

    - div with background image
    -- image
    ---div above everything with page content in

    The "-" represents the layer from top to bottom. All of 3 of these elements should be the same size, and same position. Could you recommend a way of doing this ?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by martynball View Post
    The "-" represents the layer from top to bottom. All of 3 of these elements should be the same size, and same position. Could you recommend a way of doing this ?
    Took me a minute to figure that out. I hope I understand what you mean. I think this applies - Pitfalls of absolute positioning

    Do you really need to use positioning here? I think it could easily be done without.


    I could also to with a better way to center the entire container instead of using percentages as they do not work very good
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    I still think a link to your test site would help in this case, we would be able to see your images that way. It's got to go live sometime or other, might as well get some webspace somewhere so you can test it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    martynball (01-27-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Sorry, I suck at explaining things. What I need is a div with a background image, then an image over the top of that background image (same size). Then on top of that image should be another div so I can add content over the top of the image.

    Also just found a host, here is a link to the website.
    http://martynleeball.web44.net/

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    This may be a start -
    Code:
    body {
    	background-color:#2b2b2b;
    	background-image: url(images/background_gradient.jpg);
    	background-repeat:no-repeat;
    	background-size:60%;
    }
    .container {
    width: 1024px;
    height: 645px;
    margin: 0 auto;
    	background:url(images/backgrounds/hamster.jpg);	
    
    }
    .main_content_container {
    	height:500px;
    	width:810px;
    margin: 0 auto;
    }
    .main_content {
    	background-color:#003366;
    }
    .social_icons { text-align:right; margin-bottom:4px; }
    .icon {
    	background-image:url(images/social_icons.png);
    	height:27px; width:27px;
    	display:inline-block;
    } .icon img { visibility:hidden; }
    .twitter { background-position:0px 0px; } .twitter:hover { background-position:0px -27px; }
    .rrs { background-position:27px 0px; } .rrs:hover { background-position:27px -27px; }
    .facebook { background-position:54px 0px; } .facebook:hover { background-position:54px -27px; }
    .content_container {
    	background-size:100%;
    	background-repeat:no-repeat;
    	position:absolute;
    }
    /*.shadow {
    	position:absolute;
    	bottom:;
    	margin-top:110%%;
    }*/
    .content_container {
    	width:100%; height:100%;
    	position:absolute;
    }
    .image_container img {
    	position:absolute;	
    }
    /*.image_container {
    	background-image:url(images/backgrounds/hamster.jpg);	
    }*/
    h1 {
    	font-family:Trebuchet MS;
    	font-weight:100;
    	color:#FFFFFF;
    	font-size:28px;
    	margin:20px;
    	padding-left:20px;
    	background-repeat:no-repeat;
    	background-image:url(images/header_side.gif);
    }
    You can probably get rid of .image_container. That img.shadow needs moved too.

    Is that closer to what you have in mind?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    not really as you used a div which isnt the same size as the image in the div. So the background picture is now huge. Plus i dont really want to define the size of the div as 1024.. not everyones monitor is that size

  • #8
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    bump?

  • #9
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi Martynball,

    How will you see the bottom image if there is another image on top of it?

    I just want to understand what you're building so I can maybe offer up some help.

    * You want an image, let's say, 300px X 300px.

    * You want another image on top of that one, also 300px X 300px

    * On top of these, you want a div 300px X 300px in which you can enter text

    Is this correct?

    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 11:19 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • Users who have thanked Kevin_M_Schafer for this post:

    martynball (01-31-2012)

  • #10
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    That is correct yes, the image on top of the background image will fade out using JavaScript.

  • #11
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi martynball,

    Well, there might be other ways to do this -- by a more experienced coder, but this is what I can think of at this time. I used full url addresses so you can copy the code and use it in your editor to see it work right away.

    If you want, could you post your results after applying the javascript? I'm interested in what you're building.

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
    
        <title>Divs stacked up on top of each other</title>
        
        <style type="text/css">
    	
    body {
         font-size:100%; }
    
    #underlying-image {
             width:290px;
    	 height:81px;
    	 background-image:url('http://www.theeagleextra.com/new/images/tee_e-edition.gif');
    	 background-repeat:no-repeat;
    	 position:absolute;
    	 margin-top:100px;
    	 margin-left:300px; }
    	 
    #top-image-to-fade {
             width:290px;
    	 height:81px;
    	 position:absolute;
    	 margin-top:100px;
    	 margin-left:300px; }
    	 
    #top-div-for-text {
             width:280px;
    	 height:71px;
    	 font-family:arial;
    	 font-size:1em;
    	 color:green;
    	 line-height:1.1em;
    	 text-align:justify;
    	 padding:5px;
    	 position:absolute;
    	 margin-top:100px;
    	 margin-left:300px;}
    	 
        </style>
    
      </head>
      <body>
    
      <div id="underlying-image"></div>
      <div id="top-image-to-fade"><img src="http://www.theeagleextra.com/testfiles/helpimages/teal-image.gif" width="290" height="81" alt="teal image" /></div>
      <div id="top-div-for-text">Here's text in a third, top div! It may not look like it, but there's an underlying image, a colored block, and this text box all stacked up on top of each other.</div>
      </body>
    </html>

    Edit: You wouldn't have to use css to implement the underlying image. I just did that for the heck of it. You can incorporate the underlying image the same way the teal image is incorporated.

    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 11:29 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • Users who have thanked Kevin_M_Schafer for this post:

    martynball (02-06-2012)


  •  

    Posting Permissions

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