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%;
}
Related
Here's what I have: 800px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com
When I resize the browser window, a scroll bar is generated. When I scroll it, I see that the background image is only applied to the original unscrolled region, as seen above.
How can I solve this problem?
JSFiddle: http://jsfiddle.net/wcdXK (Not every image is working, but I believe the most important here is the CSS.)
You should replace the "width: 100%" from .pages-container CSS class with a "min-width: 800px" – it will force background to be the same width as the container if the window size becomes less than 800px.
.pages-container {
background-attachment: scroll;
background-image: url('http://baskra.com/images/bg/bg-scroll.png');
background-repeat: repeat;
min-width: 800px;
left: 0;
}
Check it here : http://jsfiddle.net/wcdXK/3/
Because the width applies to the area of the containing block, as the overall container is smaller the background shrinks to apply to the same area (along with the pages-container element).
I noticed you are experiencing many problems on your layout (you posted a similar question)
You should read a Responsive Web Design article trying to understand media queries
like this (random picked from google) http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
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/
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
I have a website that one half is white and the other half it dark gray. I am using a wrapper now that gives it a defined width and centers it like this: margin: 0px auto 0px auto;.
If you look at the website here (link removed), you will see the dark bar has stopped and is confined to that width. What would be my best bet in order to achieve this?
You can look at my stylesheet here (link removed).
Thanks in advance!Coulton
To extend the dark gray background from div.right_bar all the way to the right side of the screen, you can remove the width from the parent element div.wrapper. For example:
.wrapper { width: 100%; }
When the width on div.wrapper is specified, it doesn't fill all of the horizontal space of the page, and the white from the body element shows through.
Done this a few times.
Create a LOOOONG horizontal line of that grey color as an image. Make it like 1200px wide (1px in height). Then in CSS set it as the body background with something like this:
background:url("urlToLongHorizontalLine.png") repeat-y scroll 52% 0 transparent;
the 52% will position it so that it only begins at about the center (you may have to adjust it slightly), and repeat-y will tile it vertically.
Let me know if you have any questions.
Perhaps inside your main div, create two more divs - left and right. Then in CSS define their size/position, etc.
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.