|
CSS - Background Image Problems
I have a problem that I just cannot figure out.
Scenario I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions. Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide. Now I can acheive this fine by placing the second image in the css style sheet for my page container. But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window. How can I stop this so that it is the actual lenght of the window with teh scroll. A link to the page where if you scroll it cuts off the lilac colour: http://www.acklamflooringservices.co.uk/development/index.html The css code for my html/body and page div. Code:
html { height:100% }
body
{
margin: 0px;
background-color: #CCCCFF;
background-image: url(inc/grnd.gif);
background-repeat: repeat-x;
height: 100%
}
#PageDiv {
position:relative;
width: 940px;
margin:0px auto;
background-image: url(inc/grnd2.gif);
background-repeat: repeat-x;
height: 100%
}
Similar Tutorialsfor some reason my background image is NOT showing up-- i have tried everything that i can think of -- i do have an IMAGE directory on server-- and the image is in the directory -- i am sure it is something stupid that i am not seeing or doing but sure would appreciate a little help-- thanks in advance for help-- i so appreciate it here are links to site and code PAGE CSS - EDIT - I feel stupid because the images are named content_02.jpg not content02.jpg Sorry - I knew I wasn't crazy I've encountered a seriously odd css difficulty. Where as two nearly identical tags being called upon in the same manner... one will work and the other will not. This is my Stylesheet Code:
td.bgimg1 {
background-image: url('images/content02.jpg');
}
td.bgimg2 {
background-image: url('images/content06.jpg');
}
td.bgimg3 {
background-image: url('images/index_17.jpg');
}
td.bgimg4 {
background-image: url('images/index_18.jpg');
}
td.upbgimg1 {
background-image: url('../images/content02.jpg');
}
td.upbgimg2 {
background-image: url('../images/content06.jpg');
}
td.upbgimg3 {
background-image: url('../images/index_17.jpg');
}
td.upbgimg4 {
background-image: url('../images/index_18.jpg');
}
td.upbgimg5 {
background-image: url('../images/comic_01.jpg');
}
A:link
{
FONT-FAMILY: Verdana, tahoma, Arial;
COLOR: #284966;
TEXT-DECORATION: underline;
}
A:visited
{
FONT-FAMILY: Verdana, tahoma, Arial;
color : #284966;
text-decoration : underline;
}
A:active
{
FONT-FAMILY: Verdana, tahoma, Arial;
COLOR: #284966;
TEXT-DECORATION: underline;
}
A:hover
{
FONT-FAMILY: Verdana, tahoma, Arial;
COLOR: #FF8C00;
TEXT-DECORATION: underline;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0
}
table{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
}
This is the code where they are called upon... Code: <td width="16" class="upbgimg3"></td> This one works Code: <td width="16" class="upbgimg4"><div align="right"></div></td> As does this.. --- But the following don't work. Code: <td class="upbgimg2"> </td> Code: <td class="upbgimg1" valign="bottom"><div align="center">- Text -</div></td> I am linking to my style sheet as follows. Code: <link href="../textstyle.css" rel="stylesheet" type="text/css"> Any ideas? Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com Dear all, I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments. Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads. If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background. Is there any way around this? Many thanks, Mark If infinite monkeys, with infinite time, can write Shakespeare, IE's CSS support = 5 monkeys, 15 minutes. I have a div with a background image, repeat-y. Both IE and Firefox put the background image in place, both repeat correctly. The problem is, IE puts the background image on top of the text!!! Background images don't get z-indexes, do they? Nothing is absolutely positioned, either. MPEDrummer [edit] On further experimentation, it seems if the div with the BG image is position: relative, then it screws up IE's idea of what a background image implies [/edit] Hey Guys, I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated. Here is my CSS Code: ul#nav { height: 91px; width: 271px; margin:30 auto; background: url(images/logo.jpg) no-repeat; } The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. I have recently (as in yesterday) installed Fireworks and Dreamweaver and I have been turning a png into a webpage and I have spent so much time getting the page to how it is now, my problem is that when I add a paragraph <p> into the html so that I can add some text, the default css background stays but does cover the entire page any more. I could be wrong and this could be a html issue (which as I am posting this seems more apparent) but if I remove the <p> the page displays perfectly although obviously no place to add text. I tried grouping them into different <div> and assigning them different ids and trying multiple different css functions to get it working,assigning the background in css but this provided the exact same result so any help would be appreciated (I think this could be more html related so after looking at my files if it is feel free to move it). You will see when you open the html file that there is a white gap under the main buttons but if u remove the <p> from the html it disappears. XHTML 1.0 Transitional complaint CSS level 2.1 Valid Ok, I cant post a link to my files so below is the best I can do or torquesro.info/Full.rar (if this is against the rules, sorry and feel free to remove it) I'm trying to set the background-image as follows- background-image: url("http://ezi-trading.com/test/welcome.gif"); This works fine inside the browser, but the background image does not display when the HTML is embedded within an HTML email. Any ideas please. The full listing is below. Thanks Matthew Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#banner{ background-image: url("http://ezi-trading.com/test/welcome.gif"); background-position:center; height:100px; width:700px; background-repeat:no-repeat; position:relative; background-color:#CCCCCC; }
-->
</style>
</head>
<body>
<div id="banner">
</div>
</body>
</html>
hi im just learning css and im trying some things out and i ran into a problem i cant solve. my background is 4 images that overlap and it looks fine when i load it on the browser. but if i try to add my banner image i cant see the banner but my "background" is still there. can i set a specific order of the pictures some how because i think the background pictures overlap my banner image. heres the code minus the banner image. let me know if theres a code to put the images in the front or the back or whichever order i want. <html> <head> <title>Weblinks Webdesign</title> <style type="text/css"> #background { position:fixed; left:3px; top:3px; width:717px; height:720px; background-image:url(images/background.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background1 { position:fixed; left:400px; top:3px; width:717px; height:720px; background-image:url(images/background1.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background2 { position:fixed; left:400px; top:300px; width:717px; height:720px; background-image:url(images/background2.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background3 { position:fixed; left:3px; top:300px; width:717px; height:720px; background-image:url(images/background3.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } </style> </head> <div id="background2"></div> <div id="background"></div> <div id="background1"></div> <div id="background3"></div> <P style="position:absolute; top:-30px; left:225px; padding: 5px 5px 5px 5px; font-size: xx-large; color: white;">Welcome to Weblinks Webdesign</P> <p STYLE="position:absolute; top:150px; left:225px; font-size: medium; color: black;">Weblinks is currently under construction</p> </body </html> In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. ok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas? Hi everyone, Please take a look at this site: http://174.122.106.156/~johanna/php The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered. Can anyone tell me what's wrong and why? Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code. How do you guys find and fix IE6-specific layout issues? Thanks. take a look at www.bosszine.be, looks fine isn't it sidebar no problems at all both in IE and FF now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF but is that so? try to capture the sidebar images from IE it won't work don't take notice at the flash infobox, that's a work in a progress furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar) there's clearly a rendering problem in IE with my background images in the css how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-) any suggestions are greatly appreciated Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! I'm setting up my first CSS page and am having a problem I do not understand. I set up my CSS page "test.css" like this:<STYLE TYPE="text/css"> BODY {background-color: #C4C4C4} H1 {font-family: serif; font-style: italic; font-weight: 900; font-size: xx-large; color : #CC3300} H2 {font-family: Fantasy; font-style: normal; font-weight: 700; font-size: large; color : #666699} P {font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: x-small; color : #993366} B {background-color: #FFFFFF; font-size: medium} </STYLE> If I copy this code directly into my <HEAD> section, it all works as expected, but when I replace this with a <LINK REL="test.css"> statement, the background and bold styles do not work while all the rest work the same. Any ideas??? Joel Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason. here is my css code: html, body { margin: 0px; padding: 0px; background-color: #000000; } /**************************/ /**************************/ /**********LAYOUT**********/ /**************************/ /**************************/ div#container { margin-left: auto; margin-right: auto; margin-top: 20px; width: 963px; height: 100%; border-style: solid; border-color: #CC9900; border-width: 2px; } /*****HEADER*****/ div#header { background-color: Teal; width: 963px; height: 175px; } /****************/ /*****MIDDLE*****/ /****************/ div#middle { width: 963px; float: left; background-image: url('../images/left.png'); background-repeat: repeat; } /*****LEFT BOX*****/ div#leftbox { background-image: url('../images/left.png'); background-repeat: repeat-y; height: auto; width: 213px; float: left; } div#links { width: 213px; height: 375px; float: left; background-image: url('../images/links.png'); } /*****MIDDLE BOX*****/ div#centerbox { background-image: url('../images/body.png'); background-repeat: repeat-y; width: 535px; float: left; border-left: solid 1px #CC9900; border-right: solid 1px #CC9900; } div#title { width: 535px; height: 40px; border-bottom-style: solid; border-bottom-color: #CC9900; border-bottom-width: 1px; margin-top: 0px; } div#list { width: 535px; height: auto; background-image: url('../images/left.png'); background-repeat: repeat-y; } /*****RIGHT BOX*****/ div#rightbox { background-image: url('../images/left.png'); width: 213px; background-repeat: repeat-y; float: right; } div#news /*This is the title text for the news box*/ { width: 213px; height: 25px; margin: auto; } div#newsbox /*This is the news box div*/ { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } div#events { width: 213px; height: 25px; margin: auto; } div#eventsbox { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } /****************/ /*****FOOTER*****/ /****************/ div#footer { background: #333333; width: 963px; height: 55px; clear: both; background-image: url('../images/footer.jpg'); } /*****CONTACTS*****/ div#phone { float: left; width: 213px; height: 55px; text-align: left; } div#address { float: left; width: 535px; height: 55px; text-align: center; } div#e-mail { float: left; width: 213px; height: 55px; text-align: right; } /*****FLASH DIVS*****/ div#flashcontent { width: 963px; height: 175px; } /********************/ /*****PROPERTIES*****/ /********************/ /*****DIVS*****/ div.event1 { background-image: url('../images/event_1.jpg'); width: 210px; height: 150px; float: left; margin-left: 37.5px; margin-right: 20px; margin-top: auto; margin-bottom: auto; } div.event2 { background-image: url('../images/event_2.jpg'); width: 210px; height: 150px; float: left; margin-left: 20px; margin-right: 37.5px; margin-top: auto; margin-bottom: auto; } div.list { width: 535px; } div.listtext { width: 435px; } div.sublisttext { width: 335px; } /*****LISTS*****/ ul { text-decoration: none; margin-top: auto; margin-bottom: auto; margin-left: -10px; width: 213px; } li { list-style-image: url('../images/diamond_bullet_white.png'); width: 213px; height: 31.25px; margin: auto; line-height: 31.25px; } /*****ANCHORS*****/ a { text-decoration: none; color: #000000; width: 213px; height: 31.25px; margin: auto; } a.e-mail /*This is issued to any anchors for e-mail, addresses*/ { color: #000000; font-weight: bold; } a:active { color: Red; text-decoration: none; list-style: none; } a.contacts { margin: none; color: #FFFFFF; } /***PARAGRAPHS***/ p#contactinfo { color: #FFFFFF; font-size: 11.5px; height: 55px; margin-top: 6px; margin-left: 10px; margin-right: 10px; } p.title { color: #000000; font-size: 30px; text-align: center; margin-top: 0px; margin-bottom: 0px; height: 40px; } p.body { width: 500px; margin: auto; } p.boxtitle { font-size: 20px; text-align: left; margin-left: 7px; margin-top: auto; margin-bottom: auto; } p.subheader { width: 500px; font-size: 14px; text-align: left; font-weight: bold; margin: auto; } Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! |
|||||||