Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 27th, 2005, 05:16 PM
Registered User
 
Join Date: Mar 2005
Location: , , .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default background image problems

I have a fixed background image underneath some links with attached images. As long as these linked images are not on top of the background they work fine but once they scroll on top of the image, the cursor only picks up the background image and no longer the linked images.

This is the css I have for the background image -

.background {
    /*This is the code for the transparent image on the index page. Position set to absolute for IE, later set to fixed for Firefox*/
    ;
    background-color: #ffffff;
    background-image: url(../Images/isidorescornerlg.jpg);
    background-repeat: no-repeat;
    background-position: left;
    opacity: 0.2;
    filter: alpha (opacity=20);
    position: absolute;
    width: 30%;
    height: 50%;
    top:20%;
    left:16%;
}

body>.maincontent>.background {
    position: fixed;
}

This is the css for the linked image-

.maincontent {
    width:80%;
    top:12%;
    left:18%;
    margin-left:18%;
    margin-top:12%;
    z-index:1;
}

.smimga {
    float: left;
    padding:1%;
    border:none;
}

And this is the html I'm using -
<div class="maincontent">
<div class="background"></div>[list]
  <li>
    <a href="../Isidores_Corner/BYS/BYS.html"><img
 class="smimga" alt="small button"
 src="../Isidores_Corner/Images/sbutton.gif" /></a>
  </li>
</ul>
</div>

Any suggestions?

 
Old April 4th, 2005, 03:25 AM
Friend of Wrox
 
Join Date: Mar 2004
Location: Bhopal, MP, India.
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to anshul
Default

I guess:D

.background {
z-index: 1;
}
.maincontent {
z-index: {2 or 3};
}

<div class="background"><div class="maincontent">[list]
  <li>
    <a href="../Isidores_Corner/BYS/BYS.html"><img
 class="smimga" alt="small button"
 src="../Isidores_Corner/Images/sbutton.gif" /></a>
  </li>
</ul>
</div></div>

 
Old April 4th, 2005, 07:33 PM
Registered User
 
Join Date: Mar 2005
Location: , , .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

When I tried placing the "mainnav" into the "background" div, it gave everything the opacity of the background image. I also tried placing the "background" div before the "mainnav" which made the links on my button .pngs work like I wanted but ruined the opacity of the .gifs so that they looked like buttons with white blocks around them. I tried with .pngs instead, but had the same problem. I may just have to move the background image away from the buttons to get this to work right.

 
Old April 11th, 2005, 09:14 PM
Registered User
 
Join Date: Mar 2005
Location: , , .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

This is just a short message to say that I finally got it working. What I ended up doing was removing the background div and making the image a non-repeating background in the maincontent div and then using a graphics program to change the image into a .png format and then saving the image with the desired opacity. Now it works fine in Firefox and I think that there is a Java Script fix to get it working in IE.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Background Image for Different Resolutions Andraw Pro VB 6 0 November 6th, 2008 12:00 PM
Background image in IE7 Samurai CSS Cascading Style Sheets 0 May 21st, 2008 10:46 PM
Background Image for GUI Floetic Java GUI 2 April 17th, 2008 09:54 PM
Background image problems in IE7 Pmac2k CSS Cascading Style Sheets 0 June 21st, 2007 04:23 AM
stretching the background image?? nerssi CSS Cascading Style Sheets 3 February 3rd, 2007 04:55 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.