Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Modifying existing CSS to display different background and table boxes

Status
Not open for further replies.

bobby8685

Technical User
Mar 5, 2006
36
US
A friend of mine found this style sheet for me. It is working fine but I would like to make some changes to it. I would like to know how to alter the backgrounds of the page. By backgrounds I mean behind where the text and images are placed and behind that where the entire page sits.

I also would like to change the table boxes to a rounded corner instead of the rectangles they are now. I did a search and found this code, but I do not how to exactly add it into the existing CSS. I am mostly confused about "your image here part".
Code:
/* set the image to use and establish the lower-right position */ .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 { background: transparent url(YourImageHere.png) no-repeat bottom right; } 

.cssbox { width: 335px !important; /* intended total box width - padding-right(next) */ width: 320px; /* IE Win = width - padding */ padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ margin: 20px auto; /* use to position the box */ }

/* set the top-right image */ .cssbox_head { background-position: top right; margin-right: -15px; /* pull the right image over on top of border */ padding-right: 40px; /* right-image-gap + right-inside padding */ } 

/* set the top-left image */ .cssbox_head h2 { background-position: top left; margin: 0; /* reset main site styles*/ border: 0; /* ditto */ padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ height: auto !important; height: 1%; /* IE Holly Hack */ } 

/* set the lower-left corner image */ .cssbox_body { background-position: bottom left; margin-right: 25px; /* interior-padding right */ padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */ }
You can see the existing CSS here at greenbackent.com, or the link below. Thanks for any help.
 
To change the background images, simply replace "YourImageHere.png" with a path and filename to whatever image you want to put in the background of the element that that rule is for.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top