Archived

This topic is now archived and is closed to further replies.

  • 0

Adding 2 Images To A Content Box


Question

Posted · Report post

Okay..... So I want to add 2 images in 1 Content Box. I have already added the first one (float: left;): http://cl.ly/image/3j24392v2Y39

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;
}
 
 
I am stuck.... CSS ninjas :ph34r: need only apply....

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

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: http://cl.ly/image/3j0F1P170519.

 

I have done some research since I first posted my query. I believe the answer is yes. Here is my reference point: http://www.css3.info/preview/multiple-backgrounds/

 

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:

Share this post


Link to post
Share on other sites

Posted · Report post

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;
}
 

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites