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.
Related
I created a Fiddle here to illustrate the problem. Just try to vertically resize the preview window in Safari/Chrome vs. Firefox.
I need the images of my slideshow to be in the container .slideshow-elem. Some of them are tall and could fill up the whole height of the slideshow, some of them are not, that's why I can't give them a fixed 100% height. My goal is to vertically center those images which are not tall enough and let the others fill the entire slideshow vertically. All of this while keeping the aspect ratio and a dynamic width.
I have done this with the max-height attribute on the images and on the .slideshow-elem container. It works in Chrome and Safari, but not in Firefox.
Any ideas on how to get this done in Firefox? Thanks a lot!
Edit: Also I don't necessarily need the height to by dynamic when resizing horizontally. It is okay for the image to be cropped then. Therefore I updated the Fiddle...
Edit 2: Okay, so I took out max-width: 100%; on .slideshow-elem and it turns out that was all I had to do... Now the image scales properly on Firefox, too. But could someone explain this to me?
If you change .slideshow-elem img to
.slideshow-elem img {
max-height: 100%;
width: 100%;
}
It will scale properly in Firefox, from your question, you were mostly concerned with keeping the height, so I assume not having it set at max-width is not an issue.
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
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 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/