My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.
Related
Most of my pages has a full width banner at the top just under the menu. They are created as a div with a background image from an image sprite file to reduce page load time.
My problem is that the div does not resize when the screen gets smaller, it just cuts the div of. What I would like is that the div is always 100% wide and its height scaling to keep the proportions of the background image (1300px × 300px).
Here' the code and a jsfiddle:
<div class="entry-content">
<div class="banner"></div>
</div>
.entry-content {
max-width: 1300px;
width: 100%;
padding: 0 20px 0 20px;
}
.banner {
margin: 0 -20px 0 -20px;
max-width: 1300px;
height: 300px;
background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
background-position: 0 -900px;
}
https://jsfiddle.net/fy2zh4vm/1/
I have added a code to resize the div proportionally with width. But don't think sprite image background will solve your problem.
here is a fiddle link
https://jsfiddle.net/fy2zh4vm/3/
$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});
As I already said in my comment: I suggest you just get rid of the sprite and you can solve your problem with background-size:cover or background-size:contain.
Just in case you can't do that, I found a solution that works with sprites, but you need javascript for that (i used jQuery, but if you prefer plain JS, that should be quite easy to achieve).
The idea is that you read the width of your banner div and adjust its height and background-position values accordingly.
And here's the Fiddle
Hope that helps, but again: This is NOT the best solution, this is only the solution if you absolutely have to use sprites!
You are looking for the background-size property you have to set it to either to cover or contain depends on if you want it to cover the div tag or not.
If you want to read more here is the link
I think it's possible with raw CSS and a little hack. There is a blog post from Nicolas, where he describes how to realize background images with defined proportions.
I made you additionally a fiddle.
The percentage in the pseudo element is built by a little calculation: 100 / ( width / height ).
EDIT: don't know if it works with sprites. But maybe it's nevertheless a help :)
I have an issue with the background of my banner where the background stops before the bottom of the div. As a results there is a big white space at the bottom.
This is a responsive website and the issue only happens after the screen size goes below 1250px (just resize your browser and you will see it).
I have tried tweaking the HTML/CSS in using firebug as much as I could (adding clearfixes ect) but nothing I tried had any results.
This is how it looks at full size, and how it should look:
This is how it looks when under 1250px with the unwanted space under it:
This is the website.
Your background image height is short, you need to modify your .slider1 class as
.slider1 {
background: url("../images/banner-background-01.jpg") repeat-x scroll center 100% transparent;
/* Rest of the styles goes here */
}
Also, as you commented, you can also try using background-size property with the y parameter that means the vertical size set to 100%
Try removing the repeat-x from the background property for .slider1. That should cause the background image to repeat in both x and y which is the default.
It would be more helpful if you had posted some code as well, but probably the quickest way to solve your issue would be to add the following CSS:
.slider1 {
background-size: 100% 100%;
}
I want to make a panel with background image, which can be resized vertically. So the simple idea is to split actual image in three parts: header, body-repeat-part, footer. It looks something like this
<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>
.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}
So I slice my image which is 100x100 into three parts - header.png - 100x20, footer.png - 100x40, and body-repeat.png - 100x1
Everything works fine in Ie9 and firefox. And even chrome works fine with 100% zoom. However when I change zoom in Chrome the picture becomes jagged i.e. you could see it's "glued" from 3 parts. Apparently chrome scales differently these images.
So my question is - could this be fixed somehow? Or is there any way to make resizable panel with background image?
Many thanks for the replies.
You can try to force no paddings, borders and margins on that tables and divs, and then try to add the CSS3 background size property!
.header {
background-image:url(header.png);
background-size:110px 20px;
}
More about CSS Background size properties: http://www.w3schools.com/cssref/css3_pr_background-size.asp
It is better too try to avoid tables when making a layout structure :)
EDIT:
You can try too to add the
background-size: cover;
property on the full page background so the background image will fit 100% of the width and height of the given area.
A great and very complete tutorial about background-size: http://www.css3.info/preview/background-size/
So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.
Would appreciate some input as to what is the best way to go around this
Use the following CSS
div {
width: 100%;
height: 400px;
background-image: url(your-path-here.jpg);
background-size: 100% 100%;
}
And see this live example
Be careful, if you don't resize the height of your footer as well, that will stretch the image.
background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)
Live demo: http://dabblet.com/gist/2790711
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}