I have a large background image that I want to use in a hero element in a site banner.
The bottom of this photo is the crucial part, so I always want it showing. background-position will align a smaller photo to the bottom of a larger element, but when the background photo is larger than the element, it keeps the top of the background-image aligned with the top of the container. I want to keep the bottom of the background-image aligned with the bottom of the container.
An example: here's a background image; I want to make sure the bottom (some mountains) always show up in this jsfiddle.
Remove background-attachment: fixed; from your hero class.
Related
I am trying to make a company logo always stay in the top left hand corner of the screen no matter what size the screen is. I do not want to use the fixed element positions as i dont want the image to scroll with the screen. My background already stretches automatically to size of the screen and therefore depending on the size of the screen the logo moves. Please let me know ideally using CSS
Simply use position: absolute; in your Logo styles
And style it with Left, Right, Top, Bottom Properties.
You can read more about position: absolute; in W3Schools : Link
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;
}
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;
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.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.