Jump to content


Photo
- - - - -

Adding 2 Images To A Content Box

content box images css

  • Please log in to reply
4 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 14 December 2012 - 10:03 PM

Okay..... So I want to add 2 images in 1 Content Box. I have already added the first one (float: left;): 

Please Login or Register to see this Hidden Content

The second would be float: right; 

 

I have this so far in CSS

 

 

/*Special Content for HomePage*/
#contentbox .homepage-box {
color: #666666;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
background-image:url('/wp-content/uploads/2012/12/WebFuel-Who-We-Are.png');
float: left;
background-repeat: no-repeat;
height: 111px;
}
 
The site: 

Please Login or Register to see this Hidden Content

 
I am stuck.... CSS ninjas :ph34r: need only apply....


#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 December 2012 - 10:44 PM

Hi WebWerx,

 

Long time no see! 

 

Okay, so I got the notion of the 1st one, but the 2nd one I'm completely missing the issue with. It's not added I presume, since I don't see it.

 

What happens when you try to add the second? BTW, since these are not boxes, but a content box, I am suspecting the issue is that you're trying to add a 2nd background in the same space.

 

My suggestion if that's the case, is to use WP-Boxer (WP.org or premium from CodeCanyon.net) or Anything Boxes (from the Store).  Boxer plugin has the ability to control things by settings, such as width, text, etc. It has some limits, but you could easily overcome them.



#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 December 2012 - 05:41 PM

Hey Rob: I actually want two background image elements within the same content box. The image you see now is on the left. The second image would be on the right side. I have not added it yet. It would go in the blank space you see here: 

Please Login or Register to see this Hidden Content

 

I have done some research since I first posted my query. I believe the answer is yes. Here is my reference point: 

Please Login or Register to see this Hidden Content

 

So something like this (Not sure of the "background-position" statements yet.

 

background-image:url('/wp-content/uploads/2012/12/WebFuel-Who-We-Are.png'), "URL of my other BG image";

background-position: left center , right centre ;

 

Hope all is well otherwise.  :zoro:



#4 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 December 2012 - 06:48 PM

So here is the code I implemented. Still some tweaking to do..

 

 

/*Special Content for HomePage*/
#contentbox .homepage-box {
  background-image: url("/wp-content/uploads/2012/12/WebFuel-Who-We-Are.png"), url("/wp-content/uploads/2012/12/WebFuel-Whats-Hurting-Your-Results.png");
  background-position: left top, right top;
  background-repeat: no-repeat;
  color: #666666;
  height: 111px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  width: 996px;
}
 

Please Login or Register to see this Hidden Content



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 December 2012 - 02:39 AM

Seems you've done it.  Admittedly, I've never seen that done.  Which begs the question, what in heck do you need help for? You're great!  Idea bouncing?







Also tagged with one or more of these keywords: content box, images, css