I want to keep the pseudo elements; which is why I inserted the
class=topbaseinner, inside the id=inner so I could control the opacity
independently of the two images using CSS, I realized that since one of
the images is within a pseudo-element putting the other image inside a
separate class wouldn't fix the problem; nether would a z-index.
Since one of the images is a background image that is titled, changing
the opacity of the image outside of CSS would not necessarily help
because the image would still be seen conjoined with the other image an
issue that I'm currently facing with CSS and you would see the two
images, instead of one image above the other image, like a layer.
Karl DeSaulniers wrote:
On Sep 23, 2015, at 10:08 PM, Crest Christopher<crestchristop...@gmail.com>
wrote:
I put a class=baselinks so I could control the footer image opacity
independently; it appears that isn't working because of the pseudo-element
interfering, any other suggestions before I come to a conclusion ?
Karl DeSaulniers wrote:
On Sep 22, 2015, at 8:10 PM, Karl DeSaulniers<k...@designdrumm.com> wrote:
Hey Crest,
You were using backgound-image: when (I think) you needed to be using just
background:
Is this what your trying to accomplish round abouts?
[code]
background:url("/wdp/wip/images/Learn2Basics_x320_bottom.png") top center/100% auto no-repeat,
url("/wdp/wip/images/bg_learntut.gif") center/auto repeat, url("/wdp/images/grid.png") top
center/auto repeat, url("/wdp/wip/images/backgroundtitle.png") top center/100% repeat;
[end code]
For the images that need opacity, make the file a transparent png or gif with
it lightened in the file.
Can't do it with CSS without making the container transparent along with it.
Here is some reading material on background.
CSS Syntax
background: color image position/size repeat origin clip attachment
initial|inherit;
http://www.w3schools.com/cssref/css3_pr_background.asp
Yes its W3Schools, but its the correct synax to learn. So no harm no foul.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
Hi Crest,
You did not apply my prior suggestion about using background instead of
background-image.
Also, get rid of #inner::before and #inner::after as they are not needed here.
When I tested in inspect element
background:url("/wdp/wip/images/Learn2Basics_x320_bottom.png") top center/100% auto no-repeat,
url("/wdp/wip/images/bg_learntut.gif") center/auto repeat, url("/wdp/images/grid.png") top
center/auto repeat, url("/wdp/wip/images/backgroundtitle.png") top center/100% repeat;
It worked fine, but had to remove the before and after pseudo elements.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
