I have a webpage where I want to show the background image # the bottom right corner of the page. For this I have the following code:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:bottom right;
}
This code works fine in IE. But in FireFox, the image is shown at the 'top' right.
Please suggest.
Regards
- Ashish
html, body { height:100%; }
body {
background:url(img_tree.png) no-repeat bottom right;
}
I think it's just that your page isnt taking up the full viewport height, which the 100% height on body/html does.
I usually just use
background: url(img_tree.png) right bottom no-repeat;
This works fine in IE and firefox
Related
There's a link to my test page Link
The problem is when I try to resize to small devices, background image is not covering the page properly, image is missing on the bottom of the page.
My CSS in head section.
Thanks in advance for any suggestions what I did wrong.
Change this
html,body {
height: 135%;
}
to
html,body {
height: auto;
}
Don't use fix height, use auto.
I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.
It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.
Here is the code on my header:
<header>
<h1><span>Sound Soups on Madison - Healthy & Convenient Alternatives for Your Busy Work Week</span><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></h1>
<nav id="nav-main">
<?php echo makeLinks($nav1); ?>
</nav>
</header>
header{
padding:0 2.12765957% 35px;
overflow:hidden;
background-image:url('../images/bg-header.jpg');
background-repeat:no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.
EDIT:
The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4
In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie
header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto;
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}
If I'm understanding your question correctly, check the top of the stylesheet # http://soundsoups.julie-edwards.com/css/responsive.css
You have
header{
background-image:url('../images/none.png');
padding-bottom:15px;
border-bottom:2px solid #7a918c;
margin-bottom:20px;
}
I think the border-bottom is the cause of the problem.
Good luck!
Had the same problem for a background-sized image on the body element.
I fixed it by applying the background-sized image to a positioned div element.
If that can be of any help.
I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I have a background image centered that Chrome displays offset by one pixel.
CSS
#container {
background: url("images/header.jpg") no-repeat scroll 50% transparent;
width: 100%
}
#header {
width: 986px;
margin: 100px auto 0 auto;
}
HTML
<html>
<body>
<div id="container">
<div id="header">centered content</div>
</div>
</body>
</html>
I guess it has to do with how different browsers handle the center -or 50%- property of the background in CSS:
Is there a known (simple) hack or alternative method to fix this? Background container has to be 100% wide.
If you can output your image wider than the browser window, that should fix it.
If found that solution here - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
For me, this did the trick:
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
I will post the link for this solution as soon as I find were I got it from a few days ago.
In the same post, the guy said the problem was with odd or even number for container width.
Anyway, this fixed the problem in my case.
If you make the background image width an odd number (987px) the positioning will be consistent across all browsers. It seems counter-intuitive but that seems to always fix the issue for me without any CSS hacks.
Is the image actually 986px? The easiest way I found to fix it is to make sure the width of the image is an even number.
Another thing you could do is add a 2px buffer (to keep the width an even number) in the background image to account for that shift. It shouldn't shift your image as viewed in the browser as long as you add a px to each side to keep it all even.
Try resizing the browser to see how it works... we are talking about pixels here, and if the window has a even width it's ok, otherwise a pixel has to be lost somewhere i guess.
I suppose the backgroud image is also 986 pixels wide? Then this effect should also be visible on the left side, turned around though.
I suggest to remove the background image from the container and add it to the header:
#container {
width: 100%;
}
#header {
width: 986px;
background: url("images/header.jpg") no-repeat scroll 50% transparent;
margin: 100px auto 0 auto;
}
I used the following bit of CSS to fix the problem on webkit. If JS isn't enabled, it works on the assumption that the browser will probably be full screen, so the viewport width on webkit will be an odd number
CSS
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
html.evenWidth {
margin-left: 0px;
}
}
JavaScript (jquery)
$(document).ready(function {
var oWindow = $(window),
htmlEl = $('html');
function window_width() {
if(oWindow.width() % 2 == 0) {
htmlEl.addClass('evenWidth');
} else {
htmlEl.removeClass('evenWidth');
}
}
$(document).ready(function(){
window_width();
$(window).resize(window_width);
});
in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?
the css for this i am using is.
#header {
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
width: 100%;
}
let me know if you want more code ill host it in jsfiddle. thank you.
i have hosted my site in http://iarmar.com/test/bn just in case you want to test.
Set min-width: 1040px; to your #header
As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.
See this www.viralment.com oh its says 30 at least
try using these:
background-image: url("gradient_bg.png");
background-repeat: repeat-x;