I have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.
I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.
When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.
This is due to the fact that my div is taller than 100% of the HTML height.
How can I address this?
You could add background-attachment:fixed; to your body element.
The caveat with this approach is that the background is now fixed in the viewport and does not scroll with the document.
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Do it like i did in this codepen, and it should work fine.
Update: (using some JS)
see this codepen for more complete solution.
Instead of positioning any items via position:absolute I utilized float as much as possible.
I also added a <div> wrapper to the entirety of contents inside of <body> this helps the proper formatting and stretches the containing <div> accordingly. The body tag and its background properties now behave properly!
Related
I have a container that contains 2 divs a transparent background color that sits on top of the video tag, the video should be full screen width 100% (height does not matter)
For some reason the transparent div is overlapping the video container height slightly (on the bottom) as seen here:
http://jsfiddle.net/v3vLq0nv/
This does not happen for an image tag, note for this example I have used an embedded youtube iframe as it has the same problem as the tag.
If I set a height on the parent container then it works fine, but setting a fixed height for the parent container makes the video not full width anymore.
The only thing I found that does work is actually change the HTML5 declaration from:
<!DOCTYPE html>
to
<!DOCTYPE>
Which I guess means it's HTML5 anymore which is not a great solution.
Note doing this in jsfiddle will not make it work as jsfiddle itself will put the declaration back in the frame "!DOCTYPE html"
I think the best two options here are:
#videoContainer { height:150px; }
or
#videoContainer iframe { float:left; }
They will both solve your problem.
Add display:block; to iframe :)
So I put a hard width on the body, I don't understand why the background image wouldn't respect that size.
Even when I put a overflow:hidden on the body, it wont cut it off.
This is part of a mobile site creator, so I wanted the dimensions of the body to be smaller to simulate a smaller screen.
I didnt want to go with an iframe.
Any ideas?
http://cl.ly/Q2uf
http://cl.ly/Q30Q
if it is a background image, it will respect the size of the div. Make sure it isn't being repeated background-repeat:no-repeat; . I'm still not sure what you are asking unless you want the background image to fit inside the smaller box in the middle of the page. Is that what you are trying to do?
The background of body extends to the whole viewport if html has no background.
So set the background of html to white or whatever you want first.
I don't think it is possible to set an exact width of body. Perhaps there are some browsers that will allow that, but not all.
Instead add a parent div right inside of body that you can define it's exact width. Then the background image will only
<style type="text/css">
#container {width:300px; background:url("") repeat;}
</style>
<body>
<div id="container">
//blah blah
</div>
</body>
I'm using Firebug to work on my CSS.
It shows the HTML, Body, and inner container all at 620px height. I assume my window is around 640px high.
Using firebug I can clearly see that all the elements end just short of the full height of the window, however the body bg-image appears to take up the whole window height, which is beyond the size of it's relative container.
How/Why is this?
Note: It is a Drupal site using normalize.css as a reset. When I talk about height there is no padding or margins on the content.
I've pushed to test, see here - http://mermaidriverpools.rickdonohoe.co.uk/
Ok, looking at your page, I'm as annoyed as you. But I think I have found why this is happening.
In this fiddle, you can see that the background properties (color, image...) extends all over the page IF it's specifically ON the body tag. It doesn't matter how big the body is (It's a 1x1 box in the fiddle).
It must be a browser behaviour. This doesn't change the actual size of the body. It will follow the normal rules (size is the same than content, a specific size if it's set or the same as the parent if inherit is set).
But in this other one (setting the background-color to an inner div with fixed dimensions) the background color doesn't extend all over the page.
Try to create a wrapper as a children of your body and place body styles on it.
<body>
<div class="all your body classes here">
</div>
</body>
if you use firefox browser you can press
ctrl+Shift+m
and paly withe resoltion you need
Is there a way to make an image repeat beyond the element div that it is placed in? When the browser is maximized, the picture will stop where the footer stops but I'd like to repeat to the max height of the browser. Possible without putting the image in the body bg? I can't place it in the body bg because of a jquery animation, and IE gradient code and an image can't be put together. Thanks.
-edit- found the solution
background image vertical repeat for a div
set the html and body in css with height:100%;
and also height:100%; in the div with image
worked because the div with the image was the first div before the reset of the content div
You cannot have images repeat outside of the parent div size in such a way that is still cross-browser compatible as far as I know.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.