Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.
Related
i have portrait image (width: 869px; height: 2853px) which i wanna use as the background image for my website. the image should be responsive and always fill the entire width of the browser window. the image should keep its proportions and should never be cropped. therefor the height needs to adjust to the given width. since the image height is always bigger than the viewport height, you should be able to scroll to the bottom of the image, which should be the bottom of the website as well.
i'd really appreciate if someone would tell me how to do this.
I think the other commenters are ignoring your request for help in not "cropping" the image, when they keep suggesting use of background-size: cover.
Here's what I've gathered are your requirements:
An image to be a background, behind the content of your site.
The background image has a specific aspect ratio and should not be cropped
If the browser window doesn't match the images aspect ratio, it should allow scrolling vertically, but should always fit to the windows width.
A css only solution...
body {
position: relative;
margin: 0;
}
body::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 0;
/* height / width = ratio% */
/* 2853px / 869px = 328.3084% */
padding-bottom: 328.3084%;
padding-bottom: calc(2853 / 869 * 100%);
background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}
Replace the url with the url of your image, and if the image pixel dimensions change, update those in the way I have commented out how padding-bottom should be calculated.
This creates a separate background element inside the body of the website and still allows you to have whatever content you want inside your site. But keep in mind, if you're on a very small screen, say 320px/480px, and the websites content becomes very tall because of the narrow width of the screen, this background image could be scrolled passed to account for the content. That won't break this code, but I would just suggest adding a background color or texture to your html element, which would show below the image in this case. Good luck.
I have a gallery (responsiveslides.js) that is launched within a jquery mobile popup that overlays the window. The desired look is to have the gallery scale based on the browser window.
Here is a stripped down working example of my setup and issue: https://jsfiddle.net/02ds2trp/
What I'm trying to accomplish is to have the popup div height match the scaled image. The blue background is ok on the sides of the image but I don't want it on the bottom/top. ie. the orange border should be tight to the image. Also the popup div shouldn't grow more then 70% of the screen.
Right now I have .popupGalleryBannerDIV with height:70% but that is growing it too big, removing that makes the image gallery have no height.
.popupGalleryBannerDIV {
position: fixed;
width: 100%;
background: #2795EE;
top: 15%;
left: 0px;
height: 70%; /* how to I make this dynamic? */
max-height: 70%;
}
Note: I've been playing with this for a week so some css markup on fiddle might be from failed attempts.
I'm having trouble figuring out how to make this work any help would be appreciated.
Edit:
Add some picture to help understand what I'm trying to do.
View post on imgur.com
Part of the problem, is that your slide is using a background image which has no default height/width on it's own. It's the content that dictates how much space should be filled up.
My suggestion is to use an tag instead or have some js function that will appropriately size the viewport height to match the image's ratio based on the viewport width.
This is how I ended up coding the size change:
function gallerySize() {
//set height of content to 70%
$('.popupGalleryBannerDIV').css("height", "70%");
//check img size compaired to it, of large set image height to height of content
var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
//else if height is smaller set conect to height of img
if (imgHeight < $('.popupGalleryBannerDIV').height()){
$('.popupGalleryBannerDIV').css("height", imgHeight);
}
}
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.
I want to keep my bg image centered, no matter if the user's monitor is large enough to fit the whole thing or too small to display it all at once. Similarly, it should remain centered horizontally when a user zooms in using ctrl+. The issue is best illustrated with images. Here is a zoomed out shot, which is the correct behavior:
Here is a zoomed in shot, which is not correct. The background shows the left margin, and is cut off 100% on the right side. It should get cut off equally from the left and right sides:
Finally here is the sample page, so you can play around with zooming in and out yourself:
http://pastehtml.com/view/b3qfjcghu.html
Thanks!
You seem to give the container the size of the image, so in fact it never is really 'centered' because it fits neatly at all times.
If you use this for #container:
width: 100%;
Then it will be using the full width of the screen, so that the background will be centered depending on the screen size.
http://jsfiddle.net/pimvdb/AxzdP/
Or, as Artfunkel suggested, you might want to just use the body element without any containers.
body {
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
}
What you could also do is creating a separate container like this:
<div id="bgcontainer"></div>
with:
#bgcontainer {
width: 100%;
height: 1000px;
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
z-index: -999 /* keep on background so that other elements are above it */
}