I have this page here:
http://www.cooperstandardperformance.com/content/test-blank-page
and I can't seem to get rid of the giant footer - there's no footer div or styling that I can see with Firebug that would indicate a giant footer.
I want the page to be white all down to the bottom - where am I going wrong? The only thing I can see that might be the cause is this:
background: none repeat scroll 0 0 #2B296A;
Is that right? Should I change that to #FFF; and be done with it? Or is there something else I am not noticing.
Remove the background style from your body tag.
According to firebug, you have a background-color on the body tag in the stylesheet¹, on line 122 :
body {
background: none repeat scroll 0 0 #001F3C;
...
}
¹ http://www.cooperstandardperformance.com/sites/all/themes/cooperstd/css/style.css?mr8j5a
Removing the background-color via firebug works.
Give your html tag a background-color or remove the blue from the body tag.
Don't provide any styling to body tag either through id or through class.
For eg.
<body>
//content goes here...
</body>
In your css:
body {
background: #fff;
...
}
The problem is your div content_column does not stretch to the bottom of the page and its background color is a different color than you have set to your body background color. The "footer" you describe is not really a footer, it's just the rest of the page.
There are several ways to fix this. You can define the height of the content_column div to stretch to the bottom of the page, which becomes quite complicated due to compatibility issues. Or you can just set the body background color to the same as the content_column div or vise versa.
Go to
http://www.cooperstandardperformance.com/sites/all/themes/cooperstd/css/style.css?mr8j5a
and here you will see..
`body {
background: none repeat scroll 0 0 #001F3C;
font-size: 1.4rem;
line-height: 2rem;
}`
here #001F3C is causing that the body to turn blue..
change #001F3C to #FFFFFF
Related
I am having a problem with one of my web pages that I can't seem to fix, a light grey color appears before the header picture as you can see here: https://victory3d.teachable.com/p/japanese-alley-3d-game-environment-creation:
I need to have a white space before the hero header content and so I added this code:
How can I modify it so that grey color doesn't show?
in the html there is a div:
<div class="course-block block liquid_html odd-stripe" id="block-8017829">
it's css is:
.course-block.odd-stripe, .block.odd-stripe {
background-color: #f7f7f7;
}
you will want to change it to:
.course-block.odd-stripe, .block.odd-stripe {
background-color: transparent;
}
For the white space, you don't have to add a p tag.
Just remove the paragraph tag you added. Then add some top padding, like 75px to the hero course block.
.course-block.even-stripe{ padding-top: 75px; }
Adjust the padding accordingly.
I am completely stumped. I am trying to add a background to my page and set the text. I am trying to do both to my body. For some reason, this has no effect:
body
{
padding-top: 80px;
background-image: url(../img/WorldGrainyBlurred.png);
background-position: -80px;
font-size: 100%;
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
}
To see if it was applied at all, I tried making the page red and making the padding huge but it never applied. I can see that the css is being applied, but this statement seems to be having no effect. Any ideas?
EDIT: JSFiddle http://jsfiddle.net/5ytdP/
You need to take these random CSS lines out that are right before the body {...}:
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
jsFiddle
The padding now is rendered properly. The background image doesn't show because it has relative path that is not on jsfiddle.net, but the browser is looking for it now. Maybe those lines need to go inside the body rule? I am not familiar with them, but I haven't seen CSS outside of a rule block before.
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 7 years ago.
I am confused about size of body tag in html.
I have a tough code as follows:
<body>
</body>
body{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Why does background cover all of the page?, I thought it should only cover 100px,
Please explain this for me, thank for your help!
This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.
I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.
As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).
Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)
The body is a special HTML tag, and ordinarily covers the entire HTML page. Try the following:
<body>
<div id="content">
Content goes here
</div>
</body>
and the CSS to accompany it would be:
body{
/* whatever body related codes you'd like to use go here */
}
#content{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.
The confusion is understandable. In the beginning, both were treated similarly, with attributes like background-color being applied to the body tag, affecting the whole page.
EDIT: To simplify thing i have added a fiddle to demonstrate how the background-color gets applied.So if you specify the background color for the body and you DONT want it to spread to the whole page you must specify the background-color for HTML too
FIDDLE
CSS
html{
background-color:yellow;
}
body{
padding: 0px;
height: 100px;
background-color: red;
}
You should explicitly specify a background color for the html tag (as browsers add it automatically), otherwise, the background of the body is spread all over the document.
I am trying to set the background color of the page at yumdom.com to yellow.
I have tried the following and it fails:
body{ background-color: yellow;} /*only a sliver under the header turns yellow.*/
#doc3{ background-color: yellow;} /*result same as above*/
#bd { background-color: yellow;} /*result same as above*/
#yui-main { background-color: yellow;} /*a rectangle turns yellow ending at where the content ends. I want this rectangle to extend all the way to the footer.*/
Also note that if in the developer tools in Chrome I highlight either one of the html elements above, I get only a certain portion of the page highlighted. A footer and the section below the content remain un-highlighted.
I want the yellow to fill the entire space between the header and the footer and leave no white space out.
Note that we are using YUI Reset, Fonts, and Grids CSS templates V 2.8.0r4
Many thanks!
The body's size is dynamic, it is only as large as the size of its contents.
In the css file you could use:
* {background-color: black} // All elements now have a black background.
or
html {background-color: black} // The page now have a black background, all elements remain the same.
<html>
<head>
<title>
webpage
</title>
</head>
<body style="background-color:blue;text-align:center">
welcome to my page
</body>
</html>
I already wrote up the answer to this but it seems to have been deleted. The issue was that YUI added background-color:white to the HTML element. I overwrote that and everything was easy to handle from there.
The problem is that the body of the page isn't actually visible. The DIVs under have width of 100% and have background colors themselves that override the body CSS.
To Fix the no-man's land, this might work. It's not elegant, but works.
#doc3 {
margin: auto 10px;
width: auto;
height: 2000px;
background-color: yellow;
}
I've checked your source code and find to change to yellow you need to adds the yellow background color to : #left-padding, #right-padding, html, #hd, #main and #yui-main.
Hope it's what you wanted.
See ya
You have to apply it to body tag.
Shorthand:
body {
background: black;
}
Single property:
body {
background-color: black;
}
Here's a html: how to change background color tutorial on YouTube.
What other answers don't mention is that there are four ways to actually specify/change CSS:
External CSS (using <link> tag to add your CSS)
Internal CSS (type CSS between <style> tags)
Inline CSS (type style attribute directly inside HTML element.
With JavaScript: use document.querySelector("#id").style.backgroundColor = 'black' just make sure to type this code between <script> tags
Looks to me like you need to set the yellow on #doc3 and then get rid of the white that is called out on the #yui-main (which is covering up the color of the #doc3). This gets you yellow between header and footer.
You are using selector in CSS, I guess you only select a component of the body. So if you want to whold background to be one color, you must select the right component.
In HTML, there is head body, head tag define the content shown on the tag.
Body define the whole body of your HTML. The highlight part is head and body of your HTML.
I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<html>
<head>
<style type="text/css">
.everything
{
background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }
#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">
<table id="table1"><tr><td>Top</td></tr></table>
<!-- This table put a big white line over my watermark image. -->
<table id="table2"><tr><td>Middle</td></tr></table>
<table id="table3"><tr><td>Bottom</td></tr></table>
<div id="div1"><tr><td>Top</td></tr></div>
<!-- Thought maybe it was a table thing but nope, divs do it too. -->
<div id="div2"><tr><td>Middle</td></tr></div>
<div id="div3"><tr><td>Bottom</td></tr></div>
</body>
</html>
Unfortunately for you, this is the intended behavior. background-image and background-color are sub-properties of the background property. Since you defined a background on #table2 and #div2, you can't see "through" them to the page background anymore.
CSS3 allows you to set the opacity of the background using the rgba() expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use a filter: rule such as the following:
#table2 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}
Note how the startColorstr and endColorstr parameters have a fourth value for alpha.
There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".
You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html
However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.
You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.
If you want to apply the watermark to each element individually, you should do something like this:
#table1, #table2, #table3, #div1, #div2, #div3 {
background: url(/images/shield-25.png) blue no-repeat center;
}
or maybe
table, div {
background: url(/images/shield-25.png) blue no-repeat center;
}