I have a with an image inside it can not be in the background of the div css. It is 3000px wide, the div must occupy 100% of the resolution of the user and need to focus the image.
Now it is painted correctly cut the image inside the div to 100% width * height 504px. However, I need to focus the image, because now comes attached to the left and above the div.
How I can make the image is centered? It can not be by CSS background or negative margins because the resolution of each user is different and not for a fixed width is just 100%.
Use this in your css style,
It may be useful to you
display:block;
margin:0 auto;
Related
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
The menu and main image are meant to be "position: fixed" (the image isn't currently), while the text can scroll next to both.
The image's width is "auto" as it's height must be 100%, however this doesn't give me a fixed point from which to place the text div, so on smaller screens te text overlaps the image.
THe text must be at all points 30px from the image, irrelevant of screen size.
Here's the setup: http://zoesghanakitchen.co.uk/?p=40
Mainly you should put the div containing image directly after the div of the menu with position:fixed. Then adjust your image width and height.
I have a background image that's centered vertically and horizontally using CSS. It looks great and is working as long as the window is large enough to display the background image.
The problem I have occurs when the window is resized to be smaller than the bg image. When this happens, the bg image continues to be centered, but I instead need to maintain a minimum margin around the top and left of the bg image. The BG image is 900px x 700px, and the code I've used is:
#main_wrapper {
background-image: url(../images/background.jpg);
position:relative;
width:900px;
height:700px;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-350px;
}
Any solution would need to continue to center the bg image horizontally and vertically when the window is large enough to allow it, but would have a minimum margin at the top when the window is shorter than the bg image, and a minimum margin at the left when the window is narrower than the bg image. Any help would be greatly appreciated. Thanks.
If this is in your <body>, I'd add two extra divs right at the beginning of the body, positioned absolute, and having a background-color of white, to make sure that in that area, the background image isn't seen.
Then wrap the rest of what you had in the body in a <div> and have it be position: relative.
I think this should result in what you want.
I have these two images that are 50px by 50px. They're each locked in 50px-by-50px divs. I don't want them to shrink when a user uses full-page zooming to reduce the page size. Actually, I want the images to be zoomed, by default, to about 75px by 75px, and I want them to shrink to a minimum of 50px.
Can anyone tell me how to do this? Can I somehow stretch the images to take up 100% of the div and then just make the div 75px by default? Then, can I somehow set a minimum of 50px for the div? Can you please show me an example?
You could set min-width and min-height style properties on the div tag and set the img tag to span the full width and height of the div tag.
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.