well, I have a div holder with dimensions width:200px and height:110px.
When i load an image, normally it exceeds such dimensions, so i need to adjust the image to such content by width or height depending of the dimensions of the image. So, if its adjusted by with, three situations may occur:
1.- height is higher than 110px, so as the div overflow is set to hidden, it will need to center it vertically.
2.- height is equal than 110px, no problem.
3.- (The issue) height is less than 110px. What's suponed i should do in this situation? because I want to cover all the div content.
Thanks.
If you load the image as a background for the container, you can mess around with background-size: cover or background-size: contain and use background-position: center center to keep it in the middle regardless of size.
Alternatively, you might want to use a table cell, as these allow contents to be vertically aligned inside (either use a table with one cell, or display: table-cell on the container).
Related
I am using fixed background images in my ReactJS website. The image I am using in header area is getting weirdly stretched (zoomed-in, only a small part of picture is visible) even though the same CSS properties for different elements work well.
App.js
return (
<div id="main">
<div id="header">
...
</div>
...
<div id="bg-img1" className="background_image">
...
App.css
#header {
background-image: url("img/svatba.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 300px;
background-repeat: no-repeat;
}
...
.background_image {
background-size: cover;
background-position: center;
text-align:center;
min-height: 326px;
background-repeat: no-repeat;
}
#bg-img1 {
background: url('img/svatba2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
...
Now the image in the "header" element shows up zoomed, not covering the viewport as it should. The image in the "bg-img1" element is displayed properly.
What am I missing?
When you set the background-size to "cover", you are telling it to take that image and resize it (or "zoom it in" as you're saying) so that it covers the entire section (here #header).
If your hope is to have a header 300px high that spans the whole width of the page without losing any portions of your image, You would need to serve an image that shares the same proportions as your header.
For example, if your header is 300 x 1000, you could load an image of the same dimensions or of 120 x 400, keeping an aspect ratio of 3:10.
background-attachment
The way that background-attachment: fixed is commonly used is as a way to prevent a background image from moving relative to the viewport whenever the document is scrolled.
Note: For the purposes of this explanation, the viewport can be thought of as being equivalent to the browser window, although this isn't strictly the case.
CSS does this by basically taking the element's background image and attaching it to the viewport instead of to the element itself.
Since the viewport doesn't change its position when the user scrolls, the image will be statically positioned relative to the window. So far, so good.
background-size
Where we get into trouble with attachment is when we try to combine it with background-size: cover (or contain). Because background-attachment has already sent the background image to the viewport, any background position changes made through the CSS become relative to the viewport.
This is normally fine, but it means that when you try to use either a percentage value or a predefined size operator like cover, the background will also be sized to the viewport.
While writing up this summary, I discovered that this behavior is mentioned in the MDN documentation. The only problem is that it's just two sentences jammed in the middle of the percentage paragraph in the Values section of the background-size page. Yikes.
Demo
I've created an interactive demo to show the results of this behavior. To view it, click here.
The demo will display four panels, each with a different combination of sizing and attachment. Move your mouse over each of these panels to see how the background image is positioned in the container, and what's been hidden.
Fun fact: I made over 300 revisions to this demo before I was comfortable calling it done :P
Conclusion
In one of your comments below, you said (emphasis mine):
Cover was the culprit - but I have a little idea why. All the images
are landscape. The elements have min-height. I expected that the cover
will fix the width to the viewport, and that contain would fix the
height to the element height. Instead I see the cover zooming absurdly
(not matching any of the dimensions) and contain matches the width
(which is what I wanted). But why?
CSS often subverts expectations, and this is no different. For the cases below, assume we're using background-repeat: no-repeat.
cover scales the background image so it fits the element's largest dimension exactly and overflows the smaller one. This will generally cause it to be much larger than the element, showing only a portion of the image.
contain sizes the background image so it fits the element's smallest dimension and leaves blank space on either side of the image in the larger dimension.
But when you use background-attachment: fixed...
When you use cover, what you're actually seeing is the image being scaled to match the height of the viewport, since the height is smaller. With a landscape image, the height of the image will be scaled to the height of the viewport, which is why it appears so large.
When you use contain, the image is scaled to match the width of the viewport. If your element takes up the full width of the viewport, this will cover the element, cutting off the image's height, if necessary.
If you want to size the image using element-relative cover or contain, your two options, essentially, are to remove background-attachment: fixed, or to resize the source image so that your background-size declaration isn't necessary. Unfortunately, no CSS solution currently exists to enable attachment and keyword-based sizing at the same time.
I want to build a fluid template where there is a content container with fixed margin on all 4 sides of the web page. If browser is resized, content box would change on all sides too keeping the same margins but changing height and width. Because of the height 100% issues I am not able to get the bottom margin correctly done if content is too long. In my case content just stretches without stopping and adding scrollbars.
See example:
http://jsfiddle.net/QzgHm/1/ (section element needs to keep bottom margin)
Try position: absolute; and then define pixels values for top, bottom, left, and right. This will essentially give you your set margin all the way around. I couldn't tell on your example which div or section you wanted these margins set on, so just be sure to use position: relative on the parent element
I have an image that I want to use as a background-image for my footer. Its sort of a gradient image, so the will be white, and the image will fade from its color, to white. It's not really a repeatable image though.
If I want it to always span the entire width of the page, is this possible without a background-repeat? Or, because of different monitor sizes, will this be impossible?
The background image I want should only be in the footer of the page. Like a sticky-footer, it should always stick to the bottom and the content will push it down as needed. It's about 400px in height.
It could still be a background (positioned bottom-center) but it can;t take up the whole height, just the width. And it need to be able to be pushed down (not fixed)
If you're comfortable using CSS3 you can use
background: #fff url(image.jpg) center center fixed no-repeat;
background-size:cover;
to have the image cover the screen. You'll want to be careful that it is at least a decent resolution though.
I'm having trouble in design layout css with div element.
Basically my main page layout design is look like the following picture :
The red box is the browser screen area.
The black box is the content area where the data will included / or loaded via ajax.
The green box is the data list which is the response result and contain about hundred rows inside. The data list contain header div and rows divs.
What i intend to do is set the overflow on the blue area which is the data rows so the scrollbar will appear on the right side of the blue box not on the right side of the red or black box.
Then when the browser area (red) resized all the div inside will also resized to the best size.
I've managed to make the scroll bar appear on the blue box when the data inside is overflow by set css overflow : auto /scroll for blue box div. But the problem is the overflow : auto properties seems only work when i set a certain height for the blue box div let's say about 400px. When i resize the browser the blue box div keeps stay with 400px height.
How to make it auto resize? Thanks in advance for any help.
You need to fix the heights of the HEADER, "Table Heading Row", FOOTER and the "subfooter" row
from there you can calculate the top and bottom position offsets for the middle box, which should be absolutely positioned, the becasue it's positioned you will also need to absolutely position the two bottom footers, in my example I have wrapped them two rows and positioned them as one, this may seem excess but there are in fact a lot of your containers which are no longer required (though I didn't weed them out)
also your float code is too excessive, you don't need to relatively position every float to left: 0.0% so I chopped all tham out, you only need top relatively position something if you want to do absolute positioning inside it.. except for the body element which is all we need to use for this style layout (note I did change the end of your HTML slightly)
refiddle: HERE
and btw, I think this one those internal rows would be better as an actual <table>, it seems like rows of Data to me ;) - and the whole thing would likely mean a lot less code..
What your looking for is a positioned div for the blue box.
.blueboxdiv{
position: relative;
top : 100px; // height of header - Top stays 100px away from header thus grows on resize!
bottom : 0px; // Bottom sticks to bottom
left : 0px; // Left sticks to left
right : 0px; // Right sticks to right
}
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.