I want to keep my bg image centered, no matter if the user's monitor is large enough to fit the whole thing or too small to display it all at once. Similarly, it should remain centered horizontally when a user zooms in using ctrl+. The issue is best illustrated with images. Here is a zoomed out shot, which is the correct behavior:
Here is a zoomed in shot, which is not correct. The background shows the left margin, and is cut off 100% on the right side. It should get cut off equally from the left and right sides:
Finally here is the sample page, so you can play around with zooming in and out yourself:
http://pastehtml.com/view/b3qfjcghu.html
Thanks!
You seem to give the container the size of the image, so in fact it never is really 'centered' because it fits neatly at all times.
If you use this for #container:
width: 100%;
Then it will be using the full width of the screen, so that the background will be centered depending on the screen size.
http://jsfiddle.net/pimvdb/AxzdP/
Or, as Artfunkel suggested, you might want to just use the body element without any containers.
body {
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
}
What you could also do is creating a separate container like this:
<div id="bgcontainer"></div>
with:
#bgcontainer {
width: 100%;
height: 1000px;
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
z-index: -999 /* keep on background so that other elements are above it */
}
Related
Yesterday I visited Artstation and I noticed a cool effect on the main background image at the top for each profile on Artstation. If you resize the window from desktop size to the left and make the window smaller, the image starts to resize and at approximately 1430 px inner size and end at approximately 1010 px inner size and after that it stops resize. The resizing is just like when you resize a common image, but this is a background image. This effect is nice for a responsive design.
I have tried to inspect the CSS, but I can't find the answer. Someone who can tell me how this is done?
This is a randomly selectedthe profile that I was looking at to show what I mean:
https://www.artstation.com/gaelleseguillon
When I try to use a background image I use this code:
.topContainerBackground
{
background-image: url(../imagesLayout/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
height: 600px;
width: 100%;
position: relative;
}
But as I wrote, I don't get the resize thing at approximately 1430 px inner size.
background-size: cover; is the key here. 1430px has no real significance, it's a function of the proportions of the background image.
When a window is really wide, cover background sizing is mostly responding to the vertical height of the container, stretching the image to match vertically.
Once you start shrinking the window, there comes a point where height is no longer the primary concern, width is. That is where the image seems to begin scaling horizontally.
I'm not actually a front-end developer, but I've been asked to do the css for a responsive web-application. Mostly I've managed to piece everything together using getBootstrap and stackOverflow, but I've run into one issue that I've not been able to find a solution for.
Namely; the design calls for a responsive full-width background image across the top of the home page. Fixed-height, to be cropped when the page narrows.
No problem in itself, but the smaller-size design for the same page calls for this image to be cropped to a slightly off-center position, like so:
There's plenty of code samples on how to lock the image to the left of the page and have it crop from the right, or center the image and have it crop from both sides equally, but I can't for the life of me figure out a fluid way to have the image crop about 33% from the left and 66% from the right.
Is there a reliable way to do this, and/or would there be a clever workaround?
The key to this is the background-position property in combination with background-size: cover.
background-size: cover tells the browser that you want the image to expand to fill the available space, and let the extra parts of the image be cut off outside of your box.
So if you had a <div> with 200px width and 200px height and an image that was 1000px wide by 500px high then it would shrink down to 200px high and 400px wide.
The next question is how do you choose which parts of the image are shown and which aren't? That's where background-position comes in.
You can set this as something simple, like background-position: center center; which centers both vertically and horizontally and is often the desired outcome. For your situation though, you want to use something like this:
background-position: center left 33%;
This will make your image centered at larger screens and when there's more width than the container (e.g. <div>) needs then it'll move it to focus on 33% from the left.
Here's a full example:
HTML:
<div class="hero"></div>
CSS:
.hero {
height: 500px;
background-image: url("[your-image-url]");
background-size: cover;
background-position: center left 33%;
background-repeat: no-repeat;
}
Hope that makes sense. Here's a codepen showing it in action.
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.