1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

adding image background with css

Discussion in 'CSS' started by ScottDB, Jul 17, 2011.

  1. #1
    I am trying to figure out how to put a php code that will show on top of an image. To see what I mean you can see the image here. I am trying to add a chat with a php code to a page and have it show inside the image. The image is the blank image on the botom left. I have read a few tutorials about it but none cover doing anything like this. Is this possible?

    I have already added the image to the page with css. Here is what I have. I just altered the exsisting image and css from above images and made a new one below it.
    <div class="col-3">
                      	<ul class="extra-banners">
                          <li><a href="#"><img src="images/banner2edit.png" alt=""></a></li>
                          <li class="second"><a href="#"><img src="images/banner3.png" alt=""></a></li>
                          <li class="third"><img src="images/banner3edit.png" alt=""></li>
                          </ul>     
                        </div>
    Code (markup):
    The third image is the one that I altered and added.
    
    /* Extra banners */
    .extra-banners {
    	position:absolute;
    	left:-40px;
    	top:-110px;
    	}
    	.extra-banners .second {
    		position:relative;
    		margin-top:-60px;
    		}
        .extra-banners .third {
    		position:relative;
    		margin-top:-30px;
    		}
    
    Code (markup):
    This is the css code that I altered to show the image. Should I put another item to the css code like .extra-banners.inside {}and link to the php code or something like that?
     
    Last edited: Jul 17, 2011
    ScottDB, Jul 17, 2011 IP
  2. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #2
    Your example is showing error page.
    As far as i read your post your trying to add image as a background to a particular div right? If i am right than you should add that image in your css like this
    
    .col-3 {
    background:url:('image path goes here');
    }
    
    HTML:
     
    fhk_kz5, Jul 18, 2011 IP
  3. ScottDB

    ScottDB Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Oops. the link is this

    I thought I had already tried that. Will have to try after work again. Can you tell me where I would put it? Not all of .col-3 is to have the background. Just the third one. tried putting it after the extra banners but maybe I had it wrong or the way I called it up was wrong.
     
    Last edited: Jul 18, 2011
    ScottDB, Jul 18, 2011 IP
  4. ScottDB

    ScottDB Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    I already have the image showing like I want it to with the css code but how do I get anything to show inside of the image. I have a few different images that I would like to put php code with to show shout box, news box, and such. Is it possible? Or do I have to add the image to the php page for those functions?
     
    ScottDB, Jul 18, 2011 IP
  5. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #5
    I get it now you want the content over the image right? so you need to position the content so, absolute positioning might work.
     
    fhk_kz5, Jul 19, 2011 IP
  6. ScottDB

    ScottDB Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    Thanks for the response. I looked up absolute possition and got a start on it. I am just learning css. I have gotten text to show and the image to show sort of. The image only goes as far as the text goes. I know it has to be in the css. I don't have a lot in the code. Also if I try and put php in place of the text the php funtion that I am trying to bring up will show but the background image is gone. Also one side of the image is gone as well.

    This is the code for the image to show like I want it to. You can see it here.
    <div class="col-3">
                      	<ul class="extra-banners">
                          <li><a href="#"><img src="images/banner2edit.png" alt=""></a></li>
                          <li class="second"><a href="#"><img src="images/banner3.png" alt=""></a></li>
                          <li class="third"><img src="images/banner3edit.png" alt=""></li>                     
                          </ul>     
                        </div>  
    
    CSS Code is this:
    /* Extra banners */
    .extra-banners {
    	position:absolute;
    	left:-40px;
    	top:-110px;
    	}
    	.extra-banners .second {
    		position:relative;
    		margin-top:-60px;
    		}
        .extra-banners .third {
    		position:relative;
    		margin-top:-30px;
    		}
    
    
    Code (markup):
    This is the code that I have for trying to add it in css as absolute. You can see it here.
    <div class="col-3">
                      	<ul class="extra-banners">
                          <li><a href="#"><img src="images/banner2edit.png" alt=""></a></li>
                          <li class="second"><a href="#"><img src="images/banner3.png" alt=""></a></li>                      
                          </ul>     
                        </div>
                       <div class="col-3">
                        <div class="inner">                   
                        this is some text to show where I am here. bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa bla bla blaa.......
                       </div>
                  </div> 
    
    The CSS that I added for this is this:
    .col-3 .inner { background:url(../images/banner3edit.png) no-repeat 0 0;
    				position:absolute;
    				left:-45px;
    				top:+175px;
    				}
    
    
    Code (markup):
     
    ScottDB, Jul 19, 2011 IP
  7. fhk_kz5

    fhk_kz5 Member

    Messages:
    191
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #7
    You should give the background to .col-3 and not the .inner class but as i see .col-3 covers whole column so first wrap inner div with some div suppose div class ="x" and give this div the background image then the image wont cut off.
     
    fhk_kz5, Jul 20, 2011 IP
  8. ScottDB

    ScottDB Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    I'm not sure exactly what you mean. I have tried it about every way possible in the last couple of days and keep getting the same results or nothing. Can you explain with an example?
     
    ScottDB, Jul 21, 2011 IP
  9. suryawl

    suryawl Peon

    Messages:
    54
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #9
    the theory of adding text in front of image is this :

    <div id="something">
    <div id="inside">
    the text
    </div>
    </div>

    #something { whatever css you want. just used background-url }
    #inside {
    whatever css you want
    position: relative;
    z-index: 1000;
    }

    you can fill z-index with any number you want as long it's positive. it basically tell the html that the text belong in the layer above the text

    hope that helps
     
    suryawl, Jul 22, 2011 IP
    ScottDB likes this.
  10. ardianet

    ardianet Member

    Messages:
    494
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    33
    #10
    couldn't quite catch what you need. But if you want to add a content(text) with background picture perhaps this concept could help :

    <div id="container">
     <di class="content">
       bla bla bla bla.. the text/content that you want to show
     </div>
    </div>

    The CSS :
    #content {
     background-image:url(images path);
     width : (specify width) px;
     height : (specify height) px; 
    }

    .content {
      width : (specify width) px;  
      height : (specify height) px;
      /*specify width and height if needed. but if you specified it, make sure you give the value not more than #container height and/or width */ 
     other CSS code that you need to style the content.
    }

    dont forget to managed the size of the image too. so it would be not to small/wide in the Container div. 
     
    ardianet, Aug 2, 2011 IP
    ScottDB likes this.
  11. ScottDB

    ScottDB Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #11
    Hey thanks that is exactly what I was looking for I think. Wont have time to test it out untill this weekend. Will this work with php code in the content to bring up a chat or newbox or something?
     
    ScottDB, Aug 2, 2011 IP
  12. ardianet

    ardianet Member

    Messages:
    494
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    33
    #12
    I guess it will work. :)
     
    ardianet, Aug 2, 2011 IP