Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I designed a website. Everything works on desktop but on mobile, it is not scrolling right or left. When I open the browser on my mobile, it is showing one-third of the website and won't let me scroll to the right. What is the problem and how do I fix this?
CSS
#container {
background-color: #f9cbdf;
width: 100%;
overflow: hidden;
background-image: url(images/webtreats_baby_pink_pattern_21.jpg);
background-repeat: repeat;
}
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
Remove
overflow: hidden;
from #container.
When overflow: hidden; is used the overflow is clipped, and the rest of the content will be invisible
The default value for overflow is visible.In this case, the content is not clipped
If overflow is set to auto, the browser decides whether to clip or not.
See more about overflow here
You need to use `overflow:scroll , check the example
.overflow{
width:200px;
overflow:scroll;
}
<div class='overflow'>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
if you want to let the users scroll all sides and if you want only x axis useoverflow-x:auto;and for yaxis overflow-y:auto;`
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This issue has had me scratching my head for a few days now. I have a website with a set CSS background with no scrolling - works well. However, on pages that are fairly long there appears an exact duplicate of the background, seemingly scrolling in FRONT of the other background.
You can see it illustrated on this page:
http://www.joyrocks.com/corporate/
I've scoured through the CSS and I'm sure I'm missing something simple, but I was hoping some fresh eyes could point me in the right direction. Cheers!
Edit: Got it solved! Sorry this may have been off-topic. Will keep that in mind in the future!
It took me a second to realize what was happening here. Now I'm not sure why it appears to be duplicated like that. Could have something to do with the background being fixed. I think your main issue here though is the body/html height.
body,html{
height: 100%;
}
That only sets the height of the viewport meaning there is still a lot of overflow that's not being covered by that.
I changed height to min-height and it seemed to have fixed the problem :)
body,html {
min-height: 100%;
}
You have a body:after rule that is applying the same style as your body.
There are two offending rules causing this:
body, body:after {
background: url('/wp-content/uploads/2014/05/background-new-2.jpg') top left fixed repeat;
}
body:after, ul.tabs li a.active:after {
content: "";
background: #FFF;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Remove the body:after definitions from those and you will be fine.
You must delete body, from this css line:
body, #section-tophat, #section-footer, #section-sub-footer
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I've looked at every similar question I can find here. I have a div for my right column, and then a div for my footer. But if my right column gets too long, it covers up the footer. What is wrong?
Site: http://www.powerhousestudios.tv/2013/
On your DIV
<div id="rightcolumn">
CSS READS
#rightcolumn {
width: 300px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ffffff;
height: 410px;
Remove the Height Parameter to fix your problem.
The rightcolumn div has a fixed height of 410px, which it seems it's not enough. Just remove the height property.
Your using relative positioning on the upcoming div. That with a z-index of 999 is making it cover your footer div.
Try:
upcoming { z-index: 0;}
and remove the spacing paragraphs in that div to get the effect you want.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I tried to solve my problem searching through the various questions already posted, but I have not found one that is made for my
I'm creating my new website using the "responsive" technique and now I'm missing just one little thing:
I enter inside a DIV a background image
The DIV should have a width of 100% to fill the entire page, and I have to make sure that the height of the DIV that contains the image will auto resize when resizing the page.
If you want the image to retain the width and height of the containing div, use:
background-size: 100% 100%;
The image will distort, but you may not mind.
If you want the background to be whatever portion of the image is sufficient to cover the
entire div as the viewport changes, use:
background-size: cover;
If you want to ensure that the entire image is in the background with the proper aspect ratio, use:
background-size: contain;
In this case, the image may be tiled to cover the div.
HTML
<div id="thediv"></div>
CSS
html, body {
height: 100%;
}
#thediv {
height: 100%;
background-image: url(http://i.imgur.com/MabCTXH.jpg);
background-size: 100% 100%;
}
Is this what you are looking for? I just added the padding: 5px; and background-color: red; so op can see that the div is 100% wide and is responsive as well as the image
http://jsfiddle.net/hyKCa/1/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My background Image navbar isn't showing properly. If you notice, the gradient for the navbar doesn't display properly. The top half should be a light gray and the bottom half should be a darker gray. When the page firsts loads you can see it appear but then it all goes gray and loses the gradient look.
My site is usahvacsupply.com and I just edited my background-image to be bigger to fit for a 1600 width resolution. Here is a picture of my background image http://tinypic.com/view.php?pic=20ge8nl&s=5. Any help would be much appreciated.
Here is my css code for the background.
html, body{
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
min-width:1600px;
min-height:1400px;
top: 0;
left: 0;
}
Removing the float:left on div with ID lol seems to fix it.
Your table element #body has a background which is obscuring the gradient. Remove it and the gradient in your background appears.
Original
#body {
background-color: #F5F5F5;
overflow-y: scroll;
}
Modified
#body {
overflow-y: scroll;
}