I am having trouble scaling a repeating image to the height of the document in html.
I can clearly see how large the html element is using the inspector.
I have set the div's height to 100rem, which should scale it to 100% of the height of the root element (which as far as I understand is the html element).
CSS:
#left-buildings{
left: 0;
float:left;
}
.buildings{
height: 100rem;
position: absolute;
width: 5%;
top: 0;
background-image: url(../media/images/city-side-seamless.png);
background-repeat: repeat-y;
background-size: contain;
}
HTML:
<div class="buildings" id="left-buildings"> </div>
<div class="buildings" id="right-buildings"> </div>
The problem is, it does not scale to the correct size.
screenshot showing that the element is not spanning the height of the page
Try changing the height to 100vh.
rem is the relative to font-size of the root element
I would put the images as an img tag inside the divs, and then you can just style them to 100% height.
I managed to get around the problem but setting the height of the buildings to a measurement in pixels that fits length of the page. This prevents the buildings form scaling when one zooms in on the page. Quite conveniently, it also lets the ends "overflow" and doesn't extend the page height when you zoom. Not too sure why that happens, but I'm not complaining XD.
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 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 two div's:
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
.iphonebackground {
background-image:url("../img/iphone-frame.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height:576px;
}
.screenbackground {
background-image:url("../img/iphone-background.png");
background-repeat: no-repeat;
background-position: center;
background-size:100%;
height:576px;
}
The first, iphonebackground has background-image set as an image of an iPhone frame (http://chpwn.com/apps/iphone-frame.png). The second, screenbackground has background-image set as PNG image the same size which holds the image of what would be on the iPhone's screen (https://dl.dropbox.com/u/290586/iphone-bg.png).
The result of this is that the page renders something like this: http://imgur.com/yVF9gyg. As my site is based on the Twitter Bootstrap the div's resize to fit the browser window so on a smaller display it looks something like this: http://imgur.com/Q2Qy4wn.
As you can see, the height of the div is fixed at 576px. This means that in the second image there is a large blank space above and below the background-image. Is there a way to set the height of the divs so that they are as high as the size of the background-image's height, thus removing the blank space?
A background image has no effect on the size of the DIV to which it is attached. The size of that DIV will be determined by its content, or by width and height if explicitly set in your CSS.
If you have a DIV with a % width (i.e. unknown pixel width), then you cannot set the height based upon this unknown width without resorting to JavaScript, or... the new CSS calc() function, where you could specify the height as a ratio of the unknown width and let the browser work it out. See https://developer.mozilla.org/en-US/docs/Web/CSS/calc for more.
Support is getting better (78% according to caniuse.com) but you can't rely on it.
[edit] While looking for a solution myself, I found an excellent hack using padding-top, written by user Hasanavi in answer to this question [/edit]
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps...
You can use
height:auto; in both
I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/
My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.
The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.
If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).
If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions
You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }