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/
Related
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
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-
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 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.
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}