Jump to content
Sign in to follow this  
horusmusic

Background picture for boxes

Recommended Posts

horusmusic

Hi I am trying to put up a dozen boxes on this page instead of the list in the content section. I have pictures I want in the background of the boxes with the list items central over the picture. I could make the picture appear using html as a background for the writing, however when I tried to use spaces to make the box appear larger and show the full picture, the box remained the same size on the page. I also tried using a custom css class which I had assumed was the right way to go about it, but no picture appeared. Is there another way to do it? Or is css the right way to go and I have made a mistake? I have done some html/css already, but am relatively new to it so there is a good chance I have overlooked something. Here is the code I tried: body {background-image:url('http://www.helpforwriters.me/wp-content/uploads/2012/08/prices-icon-barcode.png''>http://www.helpforwriters.me/wp-content/uploads/2012/08/prices-icon-barcode.png');} And a shorthand version: body {background:url('http://www.helpforwriters.me/wp-content/uploads/2012/08/prices-icon-barcode.png''>http://www.helpforwriters.me/wp-content/uploads/2012/08/prices-icon-barcode.png') no repeat center;} But neither of these displayed a background at all. What am I doing wrong? Thanks

Share this post


Link to post
Share on other sites
catrina

The CSS you're using is actually for the page background (since you're using the body tag). If you want to change the background image for your boxes, you'll need to use the CSS selector for them. Are you trying to change the box area (where boxes reside) or the individual boxes?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
horusmusic

Im trying to change the individual boxes if thats possible So the rest of the code is fine, just need a different tag and it should work? Will the boxes automatically be the same size as the background picture or will it shrink the picture to fit the box?

Share this post


Link to post
Share on other sites
catrina

Boxes do not resize automatically to be the same size as the background picture. The picture won't shrink to fit the box either (it'll just fill whatever space it can in the size that it already is). Firebug for Firefox (http://getfirebug.com) or Chrome developer tools can help you figure out the CSS customization you need. For instructions on how to use Firebug for CSS customizations, please see here: http://www.pagelines.com/wiki/Custom_CSS For further background image reference: http://www.w3schools.com/css/css_background.asp


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
horusmusic

I have downloaded firebug but still cannot work out which selector/id to use for the background image. I found a div id="fbox_431" but this doesnt seem to work. What do I need instead of the body tag to change the individual box background? Thanks

Share this post


Link to post
Share on other sites
Danny

Hi, In order to add a background image to a box, you will need to find the ID of that box and the use something like this:

#fbox_431 {
	background: url(http://www.helpforwriters.me/wp-content/uploads/2012/08/prices-icon-barcode.png) 0 0 no-repeat;
	}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×