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/
Related
My site is supposed to have a fixed width layout (Not responsive) with the background expanding the full width of the browser.
However when I shrink the browser the background gets cut off when it should stay at 100% full width. The same thing happens on an iphone and ipad, part of the background is cut off.
Website here: www.knockedupnowwhat.com
Im thinking that my css is wrong somewhere?
Thanks
You need to setup min-width:1140px on all container elements that have width 100%. so for instance your footer should look like this
footer {
background: none repeat scroll 0 0 #474747;
min-width: 1140px;
width: 100%;}
In the future, posting some of your code would be useful.
However the problem is because your div.container is set to 100% and it is your wrapper div. So when you resize the browser it will only be 100% of the browser, never wider. It's cutting off the backgrounds of it's child divs.
I'm trying to add a responsive image to a front page that expands to the full width of the page. Similar to what many sliders do, but I only have one image so a slider is overkill. I've set up a div and set it's background image and background-size to 100% and that achieves the width. My problem is the height. I have to use a fixed height in order for the div to appear. I've tried setting height to auto, but then I don't get an image. I tried using this method:
How can I resize an image dynamically with CSS as the browser width/height changes?
but I can't seem to get the width to scale correctly. Using a fix height works fine until the browser window expands past the size of the image, and then it starts to cut off. Any thoughts on how I can make the height scale dynamically just as the width? Any thoughts would be greatly appreciated!
My code:
CSS:
.banner {
max-width: 100%;
height: 720px;
background: url(../images/homepagebanner.jpg) no-repeat left top;
background-size: 100%;
}
HTML5:
<div class="banner"></div>
I am using bootstrap, but this is outside of a container so it shouldn't be affecting this piece of code.
EDIT Here's the codepen:
http://cdpn.io/xLvzA
Have you tried setting the height of html to 100%, then setting the height of your banner to 100%? Adding a codepen demo to show your exact issue might help a bit better to help vizualize the exact problem you're having
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 wish to have an image (img tag not background to a div) which stretches full width and stretches to the bottom of the page (without stretching to the top).
I have tried the solution described here: CSS Background to stretch to window bottom?
but I am only getting it to stretch 100% in relation to the page, and creating a scrollbar and going under the page. I tried various variations (with min-height instead of height and I either get the image back to just full width (without stretching height to the bottom) or it stretches beyond the screen.
I have prepared a small JSFiddle of what CSS and HTML I have so far, although the effect might not be so visible.
http://jsfiddle.net/Sk55Z/
What am I missing?
I would look into jQuery Backstretch to make it cross browser. You can also use conditional html statements to rely on background cover to maintain a correct aspect ratio.
.iebg {
position: fixed;
top: 0; /* here is where you specify how low you want the image to start */
left: 0;
width: 100%;
height: 100%;
}
Throw that class on an image tag.
And here is an example with just an image tag:
http://jsfiddle.net/Sk55Z/2/
I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..
A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smaller, the background should scale down.
So I just use an img tag with absolute positioning and z-index.
However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.
Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.
overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.
And min-height, max-height and height is not working for the body tag either.
Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution
PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.
I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.
The rest of the page may need a z-index to be displayed above the div.
Note that the body will have to have min-height: 100% for this to work.
position: fixed won't work in IE < 7.