Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Foreground content not coding properly with CSS or HTML

    Greetings,

    I recently discovered how to apply a full resolution size background image with CSS2.1 and apply opacity to it (optional, of course). However, this has now affected all my foreground content including my cursor. I copied a menu design from another page of mine and pasted it on the full background page file to test how it looked. The menu resulted fine but none of the links work, nor hover effects, text color changes, etc. Also, any single link is not working either. (blue link default text appears but link is not clickable/active). I had applied opacity to it so the image would not obstruct the foreground content and opacity worked great! But when the foreground content encountered these issues I removed opacity and the issues remained.

    Does anyone know why this is can can please help?

    Thank you!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ummmm how can anyone possibly help you when you dont provide any code or a link to your site??
    Teed

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My apologies for not posting my code. I know this makes people have to visualize what I'm coding in order to try and help and that is time consuming and almost useless.

    Below is the CSS followed by the HTML:

    img.bckg
    {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    }

    @media screen and (max-width: 1024px)
    {
    {
    left: 50%; /*property not needed. Does nothing*/
    margin-left: -12px; /*property not needed. Does nothing*/
    }
    }


    <img class="bckg" src="scifi21.jpg" style="filter:
    alpha(opacity=60);">


    Thank you, all!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Put all of your content in a div with position:relative; with a z-index of 1, leave your image outside of your div and give it a z-index of 0. FYI the opacity style you used there is IE only.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •