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;
}
Related
I'm trying to get a background image to position correctly on a mobile view. When I look at the website with inspect (or re-sizing the monitor to be a mobile view), the image shows fine. However, when I view it through a phone, the image, for some reason, seems to be re-sizing to fit the phone width instead.
#hero{
height: 100vh;
max-width: 100%;
background-image: url('http://i.imgur.com/molLHMj.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div id='hero'>
</div>
</body>
If I remember correctly, setting background size as cover would make it so that if the image is bigger than the screen width, it'll simply be hidden, but this seems to be resizing for some reason.
Edit:
Setting background-size to auto displays the image like how it looks like in chrome's inspector. This shouldn't be the case, as the wider version displays the full width/height (given that it's auto). I'm really lost on what is going on.
Edit2
Looks like only the chrome mobile version displays it that way. The default browser renders the background just like how it looks like in the desktop inspector. Really weird.
The image is resizing because you are telling it to with height: 100vh;. Additionally, the image is getting skewed because you are placing a restriction on the width with: max-width: 100%;.
Setting just max-width: 100%; (and removing the height:100vh) or removing both lines and just sticking with background-size:cover could clear this up.
But, if you want the background to cover the entire viewing area, don't place the background on the div. In fact, get rid of the div and just apply the background to the body.
Also, background-size:cover does not cause the image to hide, it causes the image to resize to cover the background available. This results in cropping when the background size is smaller than the image.
From MDN:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
You can achieve your goal like this:
.hero {
height:100vh;
width:100%;
}
.hero:nth-child(1) {
background-image:url('http://placehold.it/1920x1080');
background-size:cover;
}
.hero:nth-child(2) {
background-image:url('http://i.imgur.com/molLHMj.jpg');
background-size:cover;
}
<div class="hero"></div>
<div class="hero"></div>
The problem seemed to be the size of the image. It was around 3000 in width. When I resized it to around ~1900, the behavior returned to normal.
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 have a div which crops images to 600px high, this is what the code looks like:
.post .cutoff {
height:600px;
overflow:hidden;
}
.post .cutoff img {
max-width:100%;
}
And it works fine, but if the image isn't 600px or taller, any thing underneath it will be spaced until 600px has been met. Like this:
See, there's an annoying space... How can I fix this?
Use following property to cover image to element
.post .cutoff{
background:url(image.png) center center fixed;
background-size:cover;
}
background-size:cover; will stretch image to width & height of the element. And to receive a decent effect you have to center/align image as i did
Also use much smaller image will look pixlated when you will enlarge to cover element
I guess this is because your function resizes the division and not the image.
You could use javascript to do this!
Please specify what is post and cutoff.Are these the class names of the division and image respectively?
If yes,then it should work fine.
Otherwise you could use this piece of javascript to get the job done.
var x = document.getElementById("imageid").getAttribute("height");
if (x<600 || x>600)
{
document.getElementById("imageid").setAttribute("height","600px");
}
This would check if the image height is below or above 600px before increasing the height.
So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don't want the image to stretch. What I have so far is:
#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%;
height:520px;
background-size:100% 100%;
}
At the moment this is stretching the image to 100% and making the image look stretched.
Can anyone help me with this or point me in the right direction?
Use the CSS3 background-size property. Set it to cover. Like so:
background-size: cover;
Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.
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 */
}