|
CSS - Double Background
Hi,
I am trying to make my page have a double background - one picture should be repeated on X axis and one big shouldn't be repeated. My CSS file looks like this: css Code: Original - css Code html, body { min-height: 100%; height: auto; margin: 0px; padding: 0px; } body{ background-image:url(/background.jpg); background-repeat: repeat-x; background-position: center bottom; } html { background-image: url(/Pic.jpg); background-repeat: no-repeat; background-position: center bottom; }
The background(background.jpg) is displayed correctly - it's aligned to the center bottom, but the picture (Pic.jpg) is aligned to the top left corner and has height and width of the page's content. How can I fix this behavior? Similar TutorialsHiya, So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky If I spell a pseudoelement with a double colon ( :: ), example: ::first-letter (instead of :first-letter ), Internet Explorer 7 ignores the selector. Is this a bug, or is this the way CSS is supposed to work? Hello. I'm trying to create a link that spans the entire page horizontally with two different styles of text, each justified around a center margin (the text on the left being right justified, and the text on the right being left justified). I know I could set up two div's and justify the text accordingly, but I think that would separate the links when they need to remain one. Here is what I'm trying to accomplish: (I'm sorry, I'm trying to include a URL to an image, but it keeps blocking my link. No image.) So far I've got the link set up with the styles and hovers working exactly how I want, but the justification is not there. Any ideas? I have a dotted line on the right side of the left column (the blog) and a dotted line on the left side of right column (the menu). I would like a double dotted line with white space in between, so that the lines at the bottom close at the same height. How can I do this? Do I have to make a double dotted line on the right side of the blog column? Or do I have to make a third column in the middle of my blog with dotted lines on left and right side? You can find my website here and my css here Hi! I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content. If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful. Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well?? Code: *{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}
a{text-decoration:none;color:#000;outline:0}
#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}
h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}
#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #267f23;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii </p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
</ul>
<br /><br />
<p>
Litterarum
</p>
<p>
Hendrerit
</p>
<p>
In
</p>
<p>
Ut
</p>
<p>
Videntur
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="menu">
<h1><a href="index.html">BOB</a></h1>
<div>
<ul>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
</ul>
</div>
</body>
</html>
I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right. However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again. Here's the code: Code: <!-- Start row one --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> <!-- start row two - continue row structure throughout all scenes --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> and the style sheet declarations: Code:
.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}
.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;
}
Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page. I'm more than open to suggestions here! -B Have two search boxes on the Advanced Search page of my Drupal site. The first is well-behaved and sits up in the right corner. I have replacement images for the submit buttons on the search boxes of both. On the first one, the html generated text is good and gone. On the second one, it's on top of the image. Somehow I'm not addressing the second search button correctly to have the 'text-indent: -9999px;' apply. Here's the misbehaving html in question: Code:
<!--[if IE]><div class="IEroot"><![endif]-->
<div class="container-inline">
<div class="form-item">
<input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
</div>
<!--[if IE]></div><![endif]-->
Here's the CSS I'm trying to address it with: Code:
.IEroot .container-inline .form-item input.form-submit {
width: 73px;
text-indent: -9999px;
}
I'd be grateful for any help. Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh 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'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... when reading an identifier in CSS IE will treat two dots in a class decleration as one: accepted rules (strict mode): Code: win ie 5.01: p..class, p./**/.class win ie 5.5 : p..class win ie 6 : p..class, p./**/.class, p./**/class, p/**/.class win ff 1.5 : p./**/class, p/**/.class (comments ignored) win opera : (as firefox) win ns 7.0 : none! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |
|||||||