SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    background image in particular position

    i'm trying to get an image that behaves like a background image to everything (allows everthing to go over it). and i'd like to get the image in a particular position -- flush with the right of the window and 130px from the top of the window.

    how can i do that?

    thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    if it's not possible that would be a useful answer as well -- thanks. i suppose i could make the image have a block of 130 white pixels at the top of it then use body {background:#fff url(image.jpg) no-repeat top right} and it'll be in the right position but seems a bit wasteful -- having a large image just to get it in the right position. is there another way maybe or not? thanks.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use z-index'ing - give ur 'background' div a z-index of 1 and the rest of your divs that you would like to sit on top of ur background a z-index of 2. Underlap ur background div by using the margin element (e.g slide it under other divs with a margin-top:-150px , for example.

    This should work

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redhillccwebmas
    use z-index'ing - give ur 'background' div a z-index of 1 and the rest of your divs that you would like to sit on top of ur background a z-index of 2. Underlap ur background div by using the margin element (e.g slide it under other divs with a margin-top:-150px , for example.

    This should work
    thanks very much for the reply.

    right i had tried making the background image z-index -1 but that seemed to be a disaster. firefox didn't even display the image at all although safari did. i suspect negative z-index numbers should be avoided right? i don't know why but i've always felt z-index itself should be avoided in general although i don't know what i'm talking about at all really. it just feels that z-index is asking for trouble a bit. if i make a table and a paragraph of text z-index 2 (to get them on top of/over this "background" image) will that cause any problems with displaying them in any of the main browsers? (i'm severely browser short -- on a mac don't have access to pc so am very nervous of things that can make big problems in some browsers and not in others -- and z-index feels like one of those things). does ie display z-index 1 and 2 things ok generally? if so i'll definetely give that a go.

    thanks.

  5. #5
    SitePoint Enthusiast id="omg"'s Avatar
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have an example of what you've done so far?

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by id="omg"
    Do you have an example of what you've done so far?
    yup. i've done a mock up of it here: http://www.hdbatik.co.uk/pagemocks/homemockup.html

    it's not going well. the z-index doesn't seem to be working, that is the #imageblock which has z-index 1 is not behind the table which has z-index 2 (at least not for me in both safari and firefox)

    also the #imageblock text rollover area spreads right accross the page but that's another issue.

    so what the goal is, is to get the #imageblock image behind the table

    (i've just noticed another problem with the mock up version i've just put on the web for the purposes of this question: in safari locally it looks ok up to a certain point, but completely falls apart when viewed off the web -- exactly the same page. so i haven't got a clue what's going on. off the web in firefox it looks ok (up to the point it's up to that is)).

    what a nightmare this is.

    anyway best to stick to the main first problem: how to get the image in #imageblock behind the table?

    thanks.
    Last edited by johnyboy; Apr 15, 2006 at 05:20.

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    local hard drive version in safari:


    web version in safari:

  8. #8
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like what u want to achieve works in IE6 - the textured grey image is positioned behind the form boxes.

    Negative z-index numbers are invalid markup and will cause errors. When you use z-index's, you must include position:relative within the div that has a z-index in.

    Hope this helps

    James

  9. #9
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this (I have highlighted what I have added) -

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Home page mock up</title>
    <style type="text/css">
    	
    * { padding: 0; margin: 0; }
    body { padding-bottom: 2em; }
    #main {
    	margin: 0 70px 0 70px;
    	min-width: 33em;
    	max-width: 1500px;
    	font-size: x-small;
    }
    
    #bannerarea {
    	background: #fff url(banner-css.png) no-repeat top left;
    	height: 130px;
    	position: relative;
    	width: 100%;
    }
    #bannerarea img { display: none; }
    #bannerarea h1 {
    	padding: 0;
    	margin: 0 0 0 70px;
    	color: #fff;
    	font-size: xx-large;
    	font-family: "arial black", sans-serif;
    	word-spacing: -0.1em;
    	letter-spacing: -1pt;
    	position: absolute;
    	bottom: -0.30em;
    }
    #bannerarea p {
    	font-family: sans-serif;
    	font-size: 10px;
    	line-height: 12px;
    	padding: 0;
    	margin: 0 70px 0 0;
    	position: absolute;
    	bottom: 0;
    	color: #fff;
    	right: 0px;
    }
    
    #imageblock {
    	margin-top: 1px;
    	text-align:right;
    	z-index: 1;
            position: relative;
    }
    
    #imageblock h3 a {
    	padding-right: 20px;
    	text-align: right;
    	display: block;
    	color: #000;
    	text-decoration: none;
    	margin-top: -340px;
            position: relative;
            z-index: 2;
    }
    #imageblock h3 a strong {
    	display: block;
    	font-size: 75%;
    	margin-top: 15px;
    }
    #imageblock h3 a:hover { color: red; }
    
    table {
    	border: 1px solid red; /*just to see where it is exactly*/
    	z-index: 2;
    	margin-top:2em;
            position: relative;
           
    }
    .main { vertical-align: top; }
    tr a {
    	font-size: small;
    	white-space: nowrap;
    	font-family: sans-serif;
    	text-decoration: none;
    	color: #000;
    	border: 1px solid #999;
    	padding: 3px 5px 2px 5px;
    }
    td.main a {
    	float: right;
    	background: #ddf;
    	margin-right: 2px;
    	margin-bottom: 5px;
    }
    td { vertical-align: top; }
    ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    li {
    	float: left;
    	padding: 0;
    	margin: 0 3px 3px 0;
    	display: inline;
    }
    li a {
    	float: left;
    	background: #fff;
    }
    table .main a:hover { background: #cce; }
    table a:hover { background: #eee; }
    
    p {
    	padding: 1em 0;
    	line-height: 1.3em;
    	font-size: small;
    }
    
    
    
    
    
    
    </style>
    </head>
    <body>
    
    <!-- <img src="images/tempbanner.jpg" width="919" height="130" alt="A long, thin panoramic view of Walsham le Willows&rsquo; skyline that&rsquo;s mainly tree tops. The church spire protrudes from all the greenery which otherwise obscures the village buildings." /> -->
    
    <div id="bannerarea">
    <img src="banner-non-css.png" width="638" height="130" alt="The site banner" />
    
    <h1>The Site&rsquo;s Title</h1>
    <p>www.sitename.org</p>
    </div>
    
    <div id="imageblock">
    <img src="image-for-imageblock.png" alt="the #imageblock background image" />
    <h3><a href="#">A Heading <strong>This text goes over the image</strong></a></h3>
    </div>
    
    
    
    
    <div id="main">
    <table cellspacing="2"> <!-- cellspacing="0" -->
    	<tr>
    		<td class="main">
    			<a href="#">Main Item 1</a>
    		</td>
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main Item</a>
    		</td>
    
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main Item Twwwoooo</a>
    		</td>
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    
    		</td>
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main Item 3</a>
    		</td>
    		<td>
    			<ul>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main 4</a>
    
    		</td>
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main Item Five</a>
    
    		</td>
    		<td>
    			<ul>
    				<li><a href="#">Submenu Item</a></li>
    				<li><a href="#">Submenu Item</a></li>
    			</ul>
    		</td>
    	</tr>
    
    	<tr>
    		<td class="main">
    			<a href="#">Main Item 66666</a>
    		</td>
    	</tr>
    	<tr>
    		<td class="main">
    			<a href="#">Main 7</a>
    
    		</td>
    	</tr>
    </table>
    
    <p>Some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text.</p>
    
    </div>
    
    </body>
    </html>

    Works fine now in Firefox, IE6 and Opera

    Regards

    James

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh thank goodness for that -- thanks. that works (as in image behind table) for me in both safari and firefox.

    thanks.

  11. #11
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not a problem - glad I could help you out


Bookmarks

Posting Permissions

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