Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

100% Background image prob in IE

  • 02-07-2010 10:48am
    #1
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭


    Hi all,

    I am experimenting with having a background image on a page. I achieved this ok but all along I was testing it in my default browser (chrome) and it worked perfectly. However, I just looked at it in IE and image scales horizontally but not vertically.

    Here is my CSS: (I have included it all in case there is something small that interferes with it)
    body {
[B]	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #333;[/B]
}


[B]#imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;[/B]
}

#main {
	position:absolute;
	width:432px;
	height:435px;
	z-index:1;
	left: 81px;
	top: 224px;
	border-right: thin #FFF;
	border-left:thin #FFF;
	padding: 5px;
	cursor: crosshair;
	background-color: #000;
	filter:alpha(opacity=60); 
	opacity:0.6;

		}
		
	#maintext  {
		position: relative;
		width: 425px;
		height: 425px;
		z-index: 2;

	}
p {
	
	font-family: "Century Gothic";
	font-size: 15px;
	font-style: normal;
	line-height: 20px;
	color: #FFF;
	text-align:justify;
}


    Ok, now here is the HTML part:
    <body>
<div id="imagewrapper"> <img src="images/office.jpg" width="100%" height="100%" /></div>

<div id="main">
 <div id="maintext"> 
 
  <p>text text text</p>
  
  </div>
</div>

</body>
</html>

    As I said it works perfectly in Chrome, Safari but not so in IE and Firefox. Is there something I can add to this to fix the issue?

    Thanks in advance! :)


Comments

  • #2
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    imagewrapper is 100% of its container (the body) but the body doesn't have a height.

    Try adding "height:100%" the body element, and possibly to a new html CSS entry

    Also bear in mind that the aspect ratio of the image will be screwed on different screens.


  • #3
    Goodshape
    Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    Try setting the width and height of the image in the CSS. I don't think "100%" works as a value for the width or height property of the img element. It expects pixels here.
    #imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}
#imagewrapper img {
	height: 100%;
	width: 100%;
}


  • #4
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭py2006


    Liam Byrne wrote: »
    imagewrapper is 100% of its container (the body) but the body doesn't have a height.

    Try adding "height:100%" the body element, and possibly to a new html CSS entry

    Also bear in mind that the aspect ratio of the image will be screwed on different screens.

    Tried that and no luck! I don't mind the image distorting slightly because of different screens. I am just experimenting at this stage anyway!
    Goodshape wrote: »
    Try setting the width and height of the image in the CSS. I don't think "100%" works as a value for the width or height property of the img element. It expects pixels here.
    #imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}
#imagewrapper img {
	height: 100%;
	width: 100%;
}

    Good suggestion, tried it but no joy! :(


  • #5
    Goodshape
    Registered Users, Registered Users 2 Posts: 8,488 ✭✭✭Goodshape


    I just tried this and it seems to work on FF3.
    body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #333;
}


#imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}

#imagewrapper img {
	height: 100%;
	width: 100%;
	z-index: 0;
}

#main {
	position:absolute;
	width:432px;
	height:435px;
	z-index:1;
	left: 81px;
	top: 224px;
	border-right: thin #FFF;
	border-left:thin #FFF;
	padding: 5px;
	cursor: crosshair;
	background-color: #000;
	filter:alpha(opacity=60); 
	opacity:0.6;

		}
		
	#maintext  {
		position: relative;
		width: 425px;
		height: 425px;
		z-index: 2;

	}
p {
	
	font-family: "Century Gothic";
	font-size: 15px;
	font-style: normal;
	line-height: 20px;
	color: #FFF;
	text-align:justify;
}

    
<div id="imagewrapper"> <img src="images/office.jpg"></div>

<div id="main">
 <div id="maintext"> 
 
  <p>text text text</p>
  
  </div>
</div>


  • #6
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    I tried the OP's original code and it worked in IE8, IE8 in IE7 compatibility mode & FF 3.6.6 on Vista


  • Advertisement
  • #7
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭py2006


    Liam Byrne wrote: »
    I tried the OP's original code and it worked in IE8, IE8 in IE7 compatibility mode & FF 3.6.6 on Vista

    Well I have IE8 and it doesn't work! :-(


  • #8
    py2006
    Registered Users, Registered Users 2 Posts: 9,844 ✭✭✭py2006


    Oh for the love of god:

    position: fixed; sorted it out!!! :eek::rolleyes::o


Advertisement