I am using a layout where I have a centered title/logo image at the top and it connects with the background image which is being repeated vertically.
The problem is that the background only stays centered as long as the viewport is sufficiently wide enough. When I decrease its width below the width of the background image, the background image is no longer centered and is just drawn starting from the left so it no longer connects to the logo image.
I drew that picture just for your personal amusement.
is what you mean like this http://jsfiddle.net/yuliantoadi/FZAMX/ ?
Set min-width on body to be at least equal to your image with borders. In this test case that is 642px;
Have you tried setting min-width on html to be the min-width of the image? I tried that on your first link in Chrome and it seemed to work. I set min-width to 680px.
I ended up not using a body background-image after all, making a 100% min-height div which always extends to the bottom is much easier. Here's what I came up with: http://213.251.177.42/misc/background-problem/container.html
Related
Trying to make the jumbotron fit all of the page, because now its not stretched full in the bottom. I tried position fixed, but that made a problem when I get more content in the container its must be able to scroll.
bootply: http://www.bootply.com/125955
From what I can tell your jumbotron technically fits all of the page, You're styling the inner container with background colour and borders which makes it appear like it doesnt fit the page.
Take the background-color and border styles off .container, and add them to .jumbatron also add width:100% to .jumbatron if you want it the entire screen width.
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).
I am creating a blog based on the 960 grid system. It has three simple divs:
header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.
here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.
Please help me! ... This is driving me nuts!!
jake is absolutely right with the 100% width related to the viewport of the browser.
instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.
Found the solution! ... just set a max-width in pixels and also a width in 100% wherever u see this problem. Works for me.