The background image is covered by white area when you scroll all the way to the bottom. Cannot seem to figure out what it is. Played with each of the selectors and HTML. Would appreciate help. Please click link go to the CodePen where the code is visible.
https://codepen.io/siamazing/pen/QaGdWq
html, body{
height: 100%;
}
#body {
background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
height: 100%;
font-size: 15px;}
.container-fluid {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
height: 100%;}
h2 {
padding-left: 20px;
font-family: 'pacifico';
font-size: 22px;
color: #72777f;
}
header {
text-align: center;
font-family: 'pacifico';
}
article {
font-family: 'raleway';
background-color:rgba(255,255,255,.4);
color: #303338;
padding: 10px;
margin-top: 20px;
margin-left: 30px;}
Remove height:100% from #body
https://codepen.io/mirohristov/pen/MrbmWj
See Miro's answer, but here's some troubleshooting advice.
I added * { outline: 1px dashed red; } and saw this:
That made it easier to find the culprit element - #body and remove the height:100%; rule.
Related
my background is not working. I don't know why. I dont know if i have to enter my full path (for example: C:/Users/User etc.) Maybe you can help me :O
Here is my code:
padding: 0;
margin: 0;
font-family: sans-serif;
}
.body {
background-image: url(bg.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
.container {
background-color: white;
}
.header {
text-align: center;
padding-top: 8px;
padding-bottom: 14px;
background-color: #878787;
}
.main {
float: right;
padding-top: 40px;
padding-bottom: 20px;
margin-right: 50px;
}
body is a html element and not a class.
So delete the . before the body.
body {
background-image: url("bg.jpg");
...
}
share directory structure so that we could know better.
if the css file and bg.jpg are in same folder then you could try
background-image:url("./bg.jpg");
I have tried a lot.
I do not get to 100% height without scrollbars:
/* =================== Global =================== */
*{
padding: 0px;
margin:0px;
}
html, body{
height: 100%;
background-color: #7a7a78;
font-size: 11px;
font-family: Verdana, sans-serif;
}
a{
color: #000;
text-decoration:none;
}
header{
max-width: 1000px;
margin: auto;
height: 75px;
background-color: #d0ccc9;
}
nav{
background-color: #964951;
height: 30px;
}
#nav{
max-width: 940px;
height: 30px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
}
section{
margin: auto;
max-width: 970px;
background-color: #d0ccc9;
padding-left: 15px;
padding-right: 15px;
height: 30px;
}
main{
margin-left:auto;
margin-right:auto;
max-width: 970px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #d0ccc9;
min-height: 150px;
height: 100%;
}
footer{
padding-left: 15px;
padding-right: 15px;
background-color: #964951;
height: 75px;
color: #fff;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
footer a{
color: #fff;
text-decoration:none;
}
enter image description here
enter image description here
can someone tell me what I did wrong?
thank you
edit: sorry, I get the css code not inserted. always the same error although everything is correct
Without seeing the HTML code it's hard to judge, but your main element has height: 100%;. So if there are other elements outside the main element (which is very likely from your CSS), they will add to the height, which will make the overall height more than 100%, which again causes the scrollbars.
Addition after added link to picture of HTML code in comments:
It's as I wrote above: Above main there are header , nav and section, below it, there is the footer. According to the CSS you posted all this adds up to 100% PLUS 210px (210px is the sum of all other heights according to your CSS): There's the overflow that causes the scrollbar.
The solution: Apply height: calc( 100% - 210px) to the CSS rule for main (instead of the 100% height there)
I want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}
<header id="mainHeader">
<p id="hello">
<Hello>
</p>
</header>
(The text needs to be centered vertically when window is zoomed by default)
I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
margin-top: 0;
}
#body {
margin: 0;
}
EDIT:
To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
display: flex;
justify-content: center; (vertical center)
align-items: center; (horizontal center)
}
Maybe you can play with the padding-top property! Of course, I've deleted the margin top that the <p> adds by default...
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
padding-top: 100px;
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin: 0 auto;
text-align: center;
}
#body {
margin: 0;
}
The white space has nothing to do with centring text. That is the combination of the default margin-top that applies to paragraphs and collapsing margins.
Add margin-top: 0 to the rules for #hello.
So I am currently making a website for a friend of mine and I have set the left and right margin to 80px. This works for everything but my main body. It seems that it expands past the right margin, and simply has a margin of 60px instead of 80px.
Here is a screenshot: http://i.imgur.com/XtRdlUv.png
EDIT: I cut off some of the left margin, sorry for the confusion
As seen with the red arrow, there seems to be an offset when their shouldn't.
Here is my code:
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
margin-left: 80px;
margin-right: 100px;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
width: 100%;
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
<div class="mainbody" style="text-align: center">
<font face="Arial, Helvetica, sans" size="4">
<h1 style="text-decoration: underline">Download</h1>
<p>Features Include:</p>
</font>
</div>
You don't need
width: 100%;
Since .mainbody is a block element, it will expand to fill all the remaining space.
Otherwise, adding it produces the problem because of the content-box sizing model.
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
margin-left: 80px;
margin-right: 100px;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans;
font-size: 18px;
}
<div class="mainbody" style="">
<h1 style="text-decoration: underline">Download</h1>
<p>Features Include:</p>
</div>
It is likely because your .mainbody element is using the default content-box, which adds an extra left and right padding of 20px each on top of the 100% width. Therefore, the final computed width of the element would be 100% + 40px, which causes it to 'overflow' of sorts.
To fix this, simply declare box-sizing: border-box, i.e.:
.mainbody {
box-sizing: border-box;
width: 100%;
outline: #293135 solid;
background-color: #444444;
margin-top: 40px;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
In fact, it is recommended that you use this rule: * { box-sizing: border-box;} as recommended here.
I think you're using old ways. Try this! .mainbody { width: calc(100% - 120px); }
This is your new css and JSFiddle link! http://jsfiddle.net/Leo4v9rc/
body {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
}
.wrapper {
padding-top: 10px;
text-align: left;
margin: 0px auto;
}
.mainbody {
width: calc(100% - 120px);
outline: #293135 solid;
background-color: #444444;
margin:40px auto 0 auto;
text-align: left;
padding: 20px;
color: #FFFFFF;
}
The background color of the div is not showing up for the h1 and h3 content. What am I doing wrong? Thanks in advance!
CSS:
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header > h1 {
color: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header > h3 {
color: #FFFFFF;
text-align: center;
}
HTML:
<div id="header">
<h1>Hello world</h1>
<h3>Hello!</h3>
</div>
Demo
Your code works properly if you want to add background color for h1/h3 you need to specify css style for it.
#header > h3 {
color: #FFFFFF;
text-align: center;
background: red /* add this */
}
If you want to change the background color then you have to use background property not color property because color property changes the color of text inside that div.
your CSS should be like this :
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header h1{
background: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header h3{
background:#FFFFFF;
text-align: center;
}
Is this solves your problem if not comment..
Thank you!!