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;
Related
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 problem with an image in my website it does not appear properly in browsers the picture cuts certain areas in mobile browser
this are the images
desktop pc screen image
image on a mobile browser
this is the code for the image
section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;
background-position: center;
background-attachment: scroll;
}
#media only screen and (max-device-width: 320px) {
}
Step 1: Look up the code you are using to see what it is supposed to do:
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.
Well, it is clipping the image, and you don't want it to clip the image, so clearly cover is wrong.
Step 2: Look at the other options:
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
That might do the job.
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.
… or that (with 100% 100%), depending on what you actually want:
see here jsfiddle
do not use cover because that makes the image to be cropped
instead use contain also add background-position:top center because with contain the img resizes and the empty spaces ( top and bottom ) are filled with the background-color which in your case is transparent . so it's better to align the bck img to top and fill the bottom area with whatever you want
you can with media query set the background-size:cover on pc and contain on mobile
code :
section#landing {
width: 100%;
height: 100vh;
background: url('http://i.stack.imgur.com/fXmkE.jpg');
background-size: contain;
background-repeat:no-repeat;
background-position: top center;
background-attachment: scroll;
}
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
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.
Say I have an image that has a width of 2000px. The snazzy design part of my image starts at about 600px in and is 900px wide or so. What I want to do is to use this image as the background on a website and have the snazzy design centered and when you stretch the browser window, reveal the entire image still keeping the snazzy design centered. How can I do this? Also, putting the snazzy part in it's own layer above the background is not an option.
Thanks
You can center the background image using the CSS background-position attribute:
background-position: top center;
To add to Guffa's answer, you can also use percentage and pixel values to position your background image:
/* Centered vertically, 200px down from the top of the page */
background-position: 50% 200px;
/* 30px from the left edge, -10px from the top (shifted up beyond the top) */
background-position: 30px -10px;