My website is (https://www.yahoonewsz.com) and I've uploaded an image on the public_html folder in the server.
I have used the following code for background
#main {
background-image: url("image908.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
in advanced CSS section in WordPress.
Why is the image not responsive in mobile?
Thanks.
You're using background-size: cover which according to the background-size docs "Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains."
What this means is that it's scaling to the smallest "non-squished" size it can be that prevents any empty space in the container. Since your site (namely the #main) is roughly 3000px tall on mobile, the background image is being scaled to ~3000px tall.
If you want to constrain it to max width, use background-size: contain which "Scales the image as large as possible without cropping or stretching the image." meaning that it will always fill the container without being cut off. Note this will give you white space under (or above) the image based on your background-position settings.
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 hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept. It gets wide and then looks silly.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward. How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.
An example of this working on a site is techhubdenver .com with their top div background image
Can this be done with CSS or will I need to get some Javascript coding going to do this.
I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device. it only becomes a problem when the screen size is way off from the image size (too small or too wide).
if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.
Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.
You need background-size: cover;. That will scale your background such that it covers the element.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
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;
}
I am trying to crop a set of images of slightly varying sizes to be squares of matching sizes and make them responsive. I found that it's possible to crop my images by putting them in div's and then making the image a background image, but when I try to use height: auto to get responsive images, the div collapses.
This is the closest thing I can find to my problem:
How to make centre cropped image responsive?
but this solution can only get a square crop if the image is in a portrait orientation to begin with. Additionally, I would have to hand-crop every image according to it's size.
I guess what I am looking for is a CSS hack that could crop all my images to be the same size square and then responsively scale them. Is this wishful thinking for CSS?
Did you try the background-size:cover? it adjust the background image to the size of the container..
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
I'm trying to fix an issue. I have a background advertising (skin) and I must increase the size: the same adv is served for two website, but one of the website has a larger container.
I try with background-size property, but when I try to set "110%" the behavior of the background is related to the windows, so if I resize the browser the skin follow the browser.
Ho can I increase the size of the background keeping it centered on the container?
Using background-size:cover you can make a (centered) image stretch over the full size of a container element. For example:
.background {
background: url(image.jpg) 50% 50% no-repeat;
background-size: cover;
}
Try scaling the result field in this example fiddle. You'll see the image scaling to fill the div no matter what format. Read more about using background-size: cover it on CSS tricks.