* { margin: 0; padding: 0; }
body {
margin: 8px auto;
background: #20272D;
width: 900px;
}
body, td, input, textarea {
font: 11px Tahoma;
color: #DDD;
}
#content {
width: 400px;
margin: auto;
background: url(img/blixt.png) 0px 18px no-repeat;
padding-left: 25px;
}
There's a image (blixt.png) that I want to show up as background no matter how long the content inside <div id="content"> is! If its short only a bit of the image shows and as longer the text the more it shows. How can I fix so it shows the whole image no matter what? I don't want to set height.
You can set a min height, but that will require you to set a IE height fix because min-height won't work in IE.
The problem here is pretty obvious. You have an element with a background image but no height on it, so of course it's going to default to the height of the content inside it.
You can either put a height on the #content element, or move the background image to the body.
try this in the body css:
background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;
Related
I'm trying to get the white background behind the title to remain at the width of the text, not run all the way to the right of the screen, as it's doing now:
http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/
It should look like this: http://www.jmakhotels.com/images/title-tag.jpg ... but I can't figure out how to set the width so that it's dynamic for the different title lengths. This should be simple, but it's driving me insane! That .header-title element should simply be the width of the text + 10x padding on the left and right.
Here's the CSS for the blue div (which will be an image bgd), and the title element:
.main-header {
background-color: #009cff;
width: 100%;
height: 300px;
}
.header-title {
margin: -58px 0 0 18px;
padding:10px;
background-color: rgba(255,255,255,.8);
width:auto;
}
Thanks so much to anyone who can help me figure this out.
Setting display:table on the .header-title rule will fix the issue (without messing the margins).
Your .header-title (h2) is a block element, it should be a inline-block element to grab the width of the element itself.
However, your header-title can be placed inside the main-header instead of below the element.
A quick fix would be to move the .header-title element from below the .main-header div to the inside:
<div class="main-header">
<h2 class="header-title">This will be the title</div>
</div>
You want the header title to stick to the bottom of the main header, you can do this by giving it an absolute position. First we need to give the main header a relative position:
.main-header {
position: relative;
}
Now we can position header-title to the bottom of the main-header element:
h2.header-title {
position: absolute;
bottom: 0; <- stick to the bottom of main-header
left: 1em;
}
You can remove the margin from the header-title class in your CSS, because you're already telling header-title to stick to the bottom of main-header.
Change .header-title to display:inline-block then add margin-bottom: -36px; to .main-header
So:
.main-header {
background-color: #009cff;
height: 300px;
margin-bottom: -36px;
width: 100%;
}
.header-title {
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin: -58px 0 0 18px;
padding: 10px;
}
Also don't need width:auto
Try adding the style display: inline-block;
I am assuming .header-title is being used on a div that surrounds the title. You also shouldn't need width: auto;
My body is extending only to the bottom of my browser, but not to the bottom of the content. I need to have the background one colour, and the body content another, but i can't seem to make it work.
Here is the css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
* html {
height: 100%;
margin: 0px;
padding: 0px;
}
html {
background-color: pink;
}
body {
margin: auto;
max-width: 500px;
min-width: 300px;
background-color: orange;
}
#header {
background: url('http://placehold.it/400x400/0191C8') center;
background-size: cover;
height: 50%;
}
#updown {
font-size: 150%;
}
http://jsfiddle.net/LPXVm/
JSFiddle
Wrap your content in a <section> (or <div> or whatever you want) and then give it the style:background-color:orange;.
Another alternative is to extend the closing </div> of updown and place it at the end of your content. Then give that a style of background-color:orange;.
But this will of course change the font-size of the whole thing.
JSFiddle - Second option.
"I need to have the background one colour, and the body content another".
This doesn't make any sense. The "background" is the . The is at the top of the DOM.
You should assign a background color to the body, and wrap all of your content in a wrapper div or content block then give that a different color.
See updated fiddle: http://jsfiddle.net/LPXVm/4/
I am having trouble with my container div, which you will see below. It contains a very simple graphic that repeats vertically. I want the background image to expand with the content, however it is not doing so. When I expand my browser window, the background image expands to fill the page vertically, as it should...but when I scroll, the lower portion of the background that was initially below the fold, is empty when I scroll down.
I've also included the html,body as I am not sure where the problem is.
CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH
Thank you!!!
html,body {
background-color: #999;
background-image: url(../images/bg.jpg);
background-position: top;
background-repeat: repeat;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
height: 100%;
line-height: 18px;
margin: 0;
padding: 0;
}
#container {
background-color: #000;
background-image: url(../images/bg_container.gif);
background-position: left top;
background-repeat: repeat-y;
display: block;
height: 100%;
margin: 0 auto;
max-width: 1200px;
min-width: 860px;
padding: 0 3px 0 3px;
position: relative;
}
The problem here is you are using position:absolute on the div id="triathlete" then your main container doesn't take in care the space of that element. The solution you can try is this:
In your html change the order between two elements, you have:
<div id="triathlete"></div>
<div id="mainBody"></div>
Change those elements like this :
<div id="mainBody"></div>
<div id="triathlete"></div>
Then remove the position:absolute :
#triathlete {
background-image: url(../images/image_triathlete.png);
background-position: top;
background-repeat: no-repeat;
display: block;
left: 3px;
margin: 0;
padding: 87px 30px 0 30px;
/*position: absolute; Remove this
top: 363px;*/
width: 150px;
z-index: 3;
}
And change the height for the container to min :
#container {
min-height:100%;
}
The Demo
If this doesn't work (for any reason), or you feel like implementing it gives you too much or a headache, here is a quick and dirty fix using jQuery:
setInterval(function() {
$("#container").css("height",$(document).height());
},50);
This will automatically resize your container div to envelop all of it's contents, even if they are absolutely positioned.
Noting again, this is not the proper way to solve a problem like this, but might help you if you don't have time to do it the right way.
This is driving me crazy! I need assistance with this CSS code, please. I have used HTML in the past but I need to use CSS for this layout and I have never used it before. My issue right now is that the top header will not align with the lower image. I can change the margin and everything moves! If I change the size of the picture, it still will not align. Also, when I resize my browser the background moves with it and I need it fixed so the "table" stays in the middle of it. Can you please help?
CSS:
html {
margin: 0;
padding: 0;
}
body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #ffffff url(crysbg.png) no-repeat top center fixed;
margin: 0;
padding: 0;
position: absolute;
}
p {
margin: 10px;
padding: 0;
}
h1, h2, h3 {
display:none;
}
.page-wrapper {
margin: auto;
width:auto;
background:url(topbanner.png) no-repeat top center;
position:absolute;
margin-left: 318px;
margin-right: auto;
}
HTML:
<body id="crystal-self-acceptance">
<div class="page-wrapper">
Images of the issue:
http://i.imgur.com/eI8Cmns.jpg
positioning issue.
i.imgur.com/3EUEYnr.jpg
When the window is resized the center area moves away from the background. (this includes wide screens, just no screenshot of that).
Any help, please?
Edited to add jsFiddle: http://jsfiddle.net/Q3y36/8/
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all