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>
Related
So I'm trying to make the background image for one of my divs spread the full width of my screen while keeping the content in my div set at a certain width.
I've tried overflow:visible , min-width:100% , max-width:100% and none of these options seem to be working correctly. I'm unsure if it is because I've set the background image by overriding the original through CSS or what.
Since my webpage is not live yet, I've linked an image HERE to help explain.
The place I'm trying to put the rule to make the background image go full width is under #content-core with max-width:100% only to have all of the content go full width instead of just the background image.
Any help would be much appreciated and if you need more information please ask. Thanks!
You'll want to nest your content inside a container div that you'll set to 100%.
.mycontainer {
Width:100%;
}
.mycontent {
Width:80%;
}
If I understood your question right, then are overthinking this,
Simply use a main container with the CSS
background-image: url('example.com/img.png');
attribute and insert a different div in it with your content.
See here
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
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!
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 site I'm trying to build and I've hit one little snag that's driving me insane. Essentially, on pages without enough content to fill the viewport, I want to have the last div (my footer) fill the rest of the viewport, but it's currently being cut off.
My HTML looks like this:
<body>
<div id="header"> </div>
<div id="subNav"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</body>
I tried using html, body, footer { height:100%; } but that creates much more space than needed, essentially a full screen length of blank content in the footer.
How do I get my footer just to fill the rest of the screen without adding a scroll bar?
Thanks in advance,
One Frustrated Coder.
I'm pretty sure the only way to do this is by calculating the absolute remainder hight.
I.E, with jQuery
$('#footer').height( ($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px" );
You would want to do this on window resize to allow for a dynamically resizing window.
$(window).resize(function(){...});
I know this is 10 months late so you probably already figured something out. But here is one solution that I use.
(sorry, for some reason I can't get the code thing to work right to show you the code.) Basically wrap a div called "container", or something like that, around all other divs except the footer. The footer div will be just under the container div with all others inside the container.
Set the background color of your body style to be what you want your fill to be at the bottom. Then the background color of the container div would be what your body background color WAS. So everything down to the footer will be what you wanted the background color to be and then the body background color fills the rest of the page.
If you don't want to go the jQuery route, the poor man's version of this is giving #content a min-height that will make it work in most displays, and/or by giving your footer plenty of padding on the bottom. It might trigger a scrollbar in some instances, as you're just controlling how short the page can be, though.
(Or you can just accept it as a limitation of the medium. Stack Overflow, for example, just has its footer float above whitespace if the page is too short.)