Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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?

Reply With Quote
  #2 (permalink)  
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>

Reply With Quote
  #3 (permalink)  
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.

Reply With Quote
  #4 (permalink)  
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.

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 03:45 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.