How To Make Entire Webpage One Color? - html

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*/
}

Related

Fieldset background color affects website background color

I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.

Background image repositioning

An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.

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; }

css background colour

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.

Messed up absolute positioned image on my page

On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}