HTML - Adding Css Background Image Problem?

Hi all,

I want to have 2 images as backgrounds but have one on top of the other. Is this possible? If so how would I do it / what is the code?

Cheers

Raggy

I have a jQuery plugin on my website called Facebox and it for some apparent reason when the div opens up in a small pop up window like Facebook it shows my background image of my content div.

I have been working all day trying to fix this issue. When I take out the background-image from "content" div i dont have this problem but I need my content background-image to stay where it currently is.


Here is the code and an example... anyone know how I can fix this? Thank


HTML Code:

<div class="content">

    <p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>
<div id="info" style="display:none;">
    <p>Hey, I'm the 'info' div! 
    I look like this:</p>
  </div>
</div

CSS FOR CONTENT DIV IN A SEPERATE STYLESHEET FROM FACEBOX CSS
Code:

.content {
    width: 640px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/_backgrounds/homepage_content.jpg);
    background-repeat: no-repeat;
    position:relative
}

CSS FOR FACEBOX PLUGIN
Code:

#facebox .b {
  background:url(/facebox/b.png);
}

#facebox .tl {
  background:url(/facebox/tl.png);
}

#facebox .tr {
  background:url(/facebox/tr.png);
}

#facebox .bl {
  background:url(/facebox/bl.png);
}

#facebox .br {
  background:url(/facebox/br.png);
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
}

#facebox table {
  border-collapse: collapse;
}

#facebox td {
  border-bottom: 0;
  padding: 0;
}

#facebox .body {
  padding: 10px;
  background: #fff;
  width: 370px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 10px;
  text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result?

Hey, I embedded a youtube video on my site and then I tweak the youtube embed video code and added in hidden=true and &autoplay=1&loop=1. I hid the video and made it autoplay and loop, and got background sound. Works great and works both on IE and Firefox.

But I'm just wondering, is it against youtube's rules to hide their videos on your site. I feared that so I took the video off.

I'm editing a tumblr, with complete custom HTML, and I was wondering how I'd either add one fixed white rectangle going down the page vertically (the posts are centered on the page, but the page background is too distracting from the posts themselves). Or, how I would just add white borders around each individual post?


This should explain the look I want (with different colors/ background/ etc)

Hello all,

I am helping a company develop a website right now. But, I am very new to it and would like some help. I went to w3schools but I am not getting enough info. I needed help on the problems that I stated in the title.

Here is my code. I added a transparent code on the bottom, I tried to change the background by putting my renaming my picture and uploading it through godaddy. Since I have hosting and domain with godaddy, and I use companies computers I can't install a FTP client because of some restrictions. If you are confused with what I say, please ask me to clarify. If you can, can you send me your AIM, GTALK, MSN, ETC.... so we can diagnose this problem.


<html>
<body>

<p>
<Center>
<h1>Welcome to _____________</h1>
</Center>
</p>


<p>
<Center>
<h3>*******<h/3>
</Center>
</p>

<center><p><h2> Contact Us: ..........<h/2></p> </Center>
<p>
<h3><b>Introducing The ***:</B><h/3>
<center>
<h4>*$125.00 A Month Gets You Basic Service
Office Space
<p>Assigned Phone Number with Option of Voice Mail or Call Forwarding</p>
Personal Email Address
<br>(Ex: YOURBUSINESSNAME@........)</br>
<p>Access to our Conference Rooms</p>
<p>Professional Address for Mail</p>
<p>Wi-Fi with in our Office</p>
<p>E-Fax</p>
In Addition you will have Exposure to other Professionals in Real Estate Business. <h/4>

<p>Extended Use of Reception Personnel</p>
<p>Private Office</p>
<p>Warehouse Space</p>
<p>Accounting and more!</P>

$250 Initial Setup Fee Will Be Required

<p>*Contact us for more information on optional services</p>



</Center>


<p>
<h3>Along with the next step program, we offer services such as:<h/3>
</p>

<p>
<ul>
<li>Tenancy</li>
<li>Property Management</li>
<li>Rehabilitation</li>
<li>Remodeling</li>
<li>Road to Ownership</li>
</ul>
</p>

<p>
<Center>
Below are videos that explain more about our mission to provide services to the Chicagoland area.
</Center>
</p>

<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(bcc.jpeg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

Ok I'd really like to design a darker them with a lot of textures like this one:

http://www.grafpedia.com/tutorials/c...o-pixel-layout

But thats just a photoshop walk-thru.

So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image?

I'm worried about download times as I have my background image as a 1px image set on repeat.

But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I?

Basically I'm lost as to how to get my site to look like the design in the link.

Here it is now:

http://acidtripmediaproductions.com/lmi/index.html

I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it

Whats the easiest way to do that?

Would I want to keep the side bar nav where its at if I do this?

How do I put another image (websiteheader2.jpg) that will be placed before the current image (websiteheader1.jpg), into this code:

#logo-div { background-image:url('http://website.com/
websiteheader1.jpg') !important; background-repeat:no-repeat !important; background-position:10px 60px !important; }

hi people,
i have this code

Code:

	<tr valign=\"top\">
						<td align=\"center\" width=\"1%\"><a href=\"preview.php?id=".$arrayId[$scriptOffset+1]."&ref=browse&offset=".$scriptOffset."\"><img src=\"thumb/".$arrayImage[$scriptOffset+1]."\" STYLE=\"border: none;\"></a></td>
						<td  ><font face=\"verdana\" size=\"2\"><b><i>Nume:<br>Marime:<br>Format:<br>Cat.:</i></b></font></td>
						<td ><font face=\"verdana\" size=\"2\"><i>".$arrayName[$scriptOffset+1]."<br>".$arraySize[$scriptOffset+1]."<br>".$arrayFormat[$scriptOffset+1]."<br>".$arrayCatagory[$scriptOffset+1]."</i></font></td>
						<td ><font face=\"verdana\" size=\"2\"><a border='0' href=\"preview.php?id=".$arrayId[$scriptOffset+1]."&ref=browse&offset=".$scriptOffset."\" ><img src=\"images/descarca.jpg\" STYLE=\"border: none;\"></a></font></td>
					</tr>

and i wanna to add an image here



can somebody tell me how to add the image in the html code?

I'm fairly new to HTML and need help with adding text below the images I have. I am running a white backround with a gray box that has six images side by side. I want to add text below each image in the background. Can anyone hel me?

This is what I have without text so far

<td><table width="100%" border="0" cellspacing="10" cellpadding="25">


<P> &nbsp;
<strong>Padholdr tablet styles</strong><td class="greybox"<td align="middle"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images3med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images2med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/xoom5med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/x1med.jpg" width="144" height="108"></td></caption>
</tr>
</table></td>

Hello everyone,

I am trying to partially hide an image in a table cell. In other words, I don't want the part that is supposed to be hidden to show on the adjacent cells. How do I do that

Any help would be greatly appreciated.

I am trying to add an image to a site that my company recently purchased. This will be the only thing on the site and I assumed it would be fairly easy...

The code I have is:

<head>

</head>

<body>

<img src="gg_lightsout_teaser_web.jpg" width="1650" height="1275" alt="none" />

</body>

</html>

Anyone see the issue? I have not done HTML in a long time... Thanks!!

I have the following Web Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body >
<div style="margin:auto;text-align:center">
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
</div></body>

</html>

If I add another DIV with an image inside it, the images all move to the left by 8 to 10 pixels. This is the second version of the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body >
<div style="margin:auto;text-align:center">
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
</div></body>

</html>

I have no idea why the page center moves to the left, but it means that I can't get my page banner to appear the same on every page. (I've stripped out all the extra content and codes to just leave the offending images.)

I primarily use Firefox, but the same is happening in IE and Opera.

Can anybody tell me what's happening?

(I apologise if this is a well known, frequently asked question, but I couldn't find an answer and this is driving me up the wall, so any help is appreciated.)

Hi,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?