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 want to place an image as a background, I've also apply the
background-size:cover
for no-scroll. The problem is when i view the page at different resolutions the whole picture (full width) showed up instead of the center portion (blue bordered area), is there any possible way that I can set the image as background with no scrolling and image will remain center aligned.
this image may describe more specifically what I'm trying to ask. I just want to fix this image at any resolution but the blue bordered area must be remain center aligned,
You can combine background-position: center center with background-size: cover.
use:
overflow: hidden;
max-width: 1200px; // change the width
and add to the background :
no-repeat 50% 0;
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.
I want to have a background image at the center of a div (the width is fixed, but the height is content dependent, so I wouldn't know the height.)
The image is the logo of a university that logs into the system. So Its width and height are also different based on the university.
How can I place the logo at the center of the div as a watermark without having two divs? Is it possible?
Thanks
K
CSS
#test {
background-image: url(path/to/image.jpg);
background-size: 50% auto;
background-position: center center;
background-repeat: no-repeat;
}
This should put an image centered in it's parent element at a width that will be whatever percent you set. The image will be a background image. I believe IE8 and under will not display as you want. You will need to alter the image as I don't think you can adjust the opacity of a background image via CSS. So make the image semi-opaque.
Here is a fiddle: http://jsfiddle.net/MWvCA/
The other option is to add an absolute positioned img to the div, center it, and adjust the opacity via CSS, but if I were you I would just adjust the image.
background:#777777 none repeat scroll 0 0;
the 5 attributes it includes are background-color,background-image,background-repeat,background-attachment and background-position.
But I don't understand what background-attachment and background-position mean?
Can someone give an explanation?
EDIT:are background-repeat,background-attachment and background-position useless if background-image is none?
If you've ever seen a web page where the text on the page scrolls with the scrollbar, but the background remains stationary, that's
background-attachment: fixed;
Background-position defines how you position the image inside of the background of the element. For instance, if you have a small drop shadow image that should only repeat along the bottom edge of your element, you could use:
background-repeat: repeat-x;
background-position: bottom left;
Or if you had an image you only wanted displayed in the bottom, right hand corner of your element:
background-position: bottom right;
background-position also accepts pixel values in the format:
background-position: xpos ypos
for finer grain control.
background-attachment
background-position
W3Schools has a pretty good explanation of these elements:
background-attachment: determines whether the background is fixed or scrolls with the page.
background-position: determines the position of the background in relation to the page (values like top center, bottom right, pixel values, etc.)
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
scroll
The background image scrolls with the rest of the page. This is default
fixed
The background image is fixed
inherit
Specifies that the setting of the background-attachment property should be inherited from the parent element
The background-position property sets the starting position of a background image.
Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".
The background attachment specifies if the background scrolls along with the webpage.
background-attachment: fixed; would fix the background so even if a user scrolls down the webpage for example, the background wouldn't move.
background-attachment: scroll; would make the background scroll with the page.
More info here: http://www.w3schools.com/Css/pr_background-attachment.asp
The background position takes 2 arguments; the x position and the y position. It specifies where the original background image will start to be displayed. The origin is on the top-left of the container.
More info here: http://www.w3schools.com/css/pr_background-position.asp
From W3 background-attachment
The background-attachment property
sets whether a background image is
fixed or scrolls with the rest of the
page.
Lets say you have a background picture, like here (look at the pretty mountains.)
When the background-attachment property is set to "fixed", then when you scroll the page, the background remains, uh, fixed. The contents of the page scroll, but the background picture does not.
Compare to this page. See the background doodling on the sides? When you scroll down, then those drawings also scroll with the page. This is an example of the "scroll" choice - which is what you have in the CSS snippet you posted.
background-position: is used to define the anchor point of the image on the screen like top left or bottom right
background-attachment defines whether the background image will scroll with the contents