PDA

View Full Version : is this css altering possible?



ndancosse
Apr 24th, 2009, 03:06 PM
what im trying to do here is put a caption background gradient over each module within each page .
Now i know little about css but am learning ...
as you see by looking at the site is ..i have a gradient background that fits nicely on the left set of modules ... but the right set of modules are bigger therefore the caption gradient background doesnt stretch across the whole module .
Ive used web developer tool and using view css information i see the caption background is the same tag is it possible to make the gradient stretch across each particular module to fit the width of the module heading ...
Now even if i made the gradient the size of the larger one then i lose the rounded edge on the right of each module on the left ...
also when i look at it in IE theres a black background behind the gradient ... that i was able to remove by making background transparent in the css ..but that didnt seem to work in IE ..what could i do to remove it ..or how much taller would i need to make gradient to hide the black in IE ...

heres the site in question ...

football4.myfantasyleague.com/2009/home/60804
someone please help me ..

oh btw if it can be done HTML ..i have blank modules i can load html in and do it that way ...

Rowsdower!
Apr 24th, 2009, 03:49 PM
Not sure about the black BG thing but as for your gradient background, the answer is no. Your gradient has rounded top corners so when you tile them horizontally (which you can easily do with background-repeat:x-repeat;) you end up with chunks of missing BG.

Ultimately you're probably going to have to ce-create a matching gradient and then apply one of the methods here (http://www.cssjuice.com/25-rounded-corners-techniques-with-css/) to make the corners rounded again.


Anyway, there are countless ways of achieving the look that you want but unfortunately none of them will be as straightforward as a background repeat.

One afterthought: if you make the BG image appear in a regular <img> tag and specify the native height of the image, plus a width equal to your <caption> you should be able to stretch the image that way and then position the text using position:absolute; -- but you'll have to have the container positioned either relatively or absolutely as well for that to work...