css background colour - html

My CSS file contains my webpage display, the webpage is smaller than the screen (if you know what i mean) I am trying to fill the outside of my container with a background colour but it is not working. Can anybody help with this?
here is my CSS
#container {
width: 900px;
margin: 0 auto;
}
The body/ navigation etc are below the #container, does the background colour have to be before the container? I have placed it there and it is not working?

You could apply it to the body?
body {
background-color:red;
}

body {} in the css refers to the complete < body > of the website. Just set the background-color there, like:
body {background-color: #fedae3;}
of course, the container needs another background-color.

Related

How To Make Entire Webpage One Color?

I am having some trouble changing the background color of my webpage, and cannot seem to find a solution.
I have content on the page, but the black background stops when the content stops. I have tried to extend the content, use the body selector, and universal selector...but none of these work.
Is there any: height: 100% property, so that it can can retain the color for all screens?
Apply it to the html tag instead.
html{
background-color: black;
}
Your body content is overflowing the container that has the background color. That's why you see the background color stops but content goes on. To fix the issue ensure that the container contains the content.
I think you are looking for vw,vh,vmax,vmin Units
you can use it on your body tag
body{
padding: 0;
height: 100vh; /*add this to fill the screen*/
background: red /*set the background color here*/
}

why can't my div have a full-browser width background color in Wordpress?

I'm creating a theme from scratch. My body has a white background and I want a div within the body to have a grey background-so that a small area of the body will have a different color (grey) background.
I've changed my div's background-color to grey but I can't get rid of the white margins on either side. Probably because my div.container has a max-width: 960px;. How do I get this grey div to go full browser width, with no white on either side, but still keep the body's content/text at 960px?
Add an outer div before your div.container
<div class="outer-div">
<div class="container">
</div>
</div>
In your css
.outer-div {
background-color: grey;
}
Look in the css for the body tag, where it is more than likely has width: 960px;, so changing the body background will not change the full width background.
So to change the full width background you will need to change the html tag's css.
html
{
background: #yourcolor;
}

how can I make logo background fill header?

I am wondering how to accomplish this logo background found here
if you notice the logo floated to the left and how the white "D" is on a red color background that fills the entire height of the header. I know how to float it and everything, I just need to know how to make a background color with a certain width to fill the entire height of the header like so. And by the way I am assuming that there is no set height already for the header.
Thanks in advance!
Whatever id or class your floated div is for the logo, simply apply a background color to that in CSS.
If you're looking for some sort of dynamic height application; set the html, body, and enclosing div elements to all have 'height:100%'.
Posting a sample of your code would help.
You may want to try something like this (fiddle here):
HTML:
<div id="Header">
<img id="Logo" src="http://goo.gl/uDkk1X" />
</div>
CSS:
#Header {
width: 600px;
height: 60px;
background: #333333;
}
#Logo {
width: 60px;
height: 60px;
float: left;
background: #666666;
}
As you can see, the image already has transparency, so any background color set to this block would render behind the actual image. Either that or put your img inside another container with a specified background color.

Why is my background spread across the browser when I set body {width: 960px; margin: auto 0;}? [duplicate]

This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 8 years ago.
So I have this very basic question that I was wondering about. I just set a background through css with
body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}
Why is the image showing up at both sides as well and not only in the center 960 pixels? If I put my background image in a navigation class selector, it does work:
.container {
background: #099;
}
Why is that? Shouldn't the body image be restricted by the width that I set?
Here is my code: http://jsfiddle.net/nB22j/
Also, is there any use for the .container selector if I can just put everything in body {} ? (In this case I do want the background to fill the full browser so I can put my background in body {} but I'm just wondering...) I'm not sure anymore why I added the container div in the first place. Any reason for it to exist?
Because, if you set no background to HTML , body's background is applied to HTML too.
Just add this : DEMO
html {
background:#fff;/* or any color/image/gradient you want */
}
and your background for body will only be drawn where body stands.
See W3C for more infos.

CSS Footer Issue

You know how sometimes when you're low on content, and then footer stands right under the content?
Instead of sticking it to bottom using fixed position, or else,
Why not make everything under footer, be the same color as the footer's background (without changing the body background, if possible).
Also, to use 100% as height, so it's dynamic.
For example:
BEFORE:
http://gyazo.com/801af7d0c1c797900ca00648cc82443e
AFTER:
http://gyazo.com/5cb8503f122107d83a01ddae2c7fbc2a
How do I do so?
Thanks!
Use CSS sticky footer to ensure that the footer sticks to the bottom of the viewport when there is not enough content to fill the page - http://ryanfait.com/sticky-footer/
I usually let the body of the page have the color which you want below the footer. Then let a container (with 100% width) have the actual page color. To avoid "flicker" or a black page (depending on color offcourse) I add this to the container:
#container {
background-color: white; /* Page color */
min-height: 600px;
overflow:auto;
}
You can make the page have the background color of the footer, like:
body { background: blue; }
div.footer { background: blue; }
Then, you want your main content div to have a good color, like white:
div.content { background: white; }