We are creating a new Web site where the entire background of the homepage is to show rotating images. I am using this CSS code to set the background image class:
That’s a small image - it’s going to get stretched if shown across the full width of hte page.
That image you have there just isn’t suitable for stretching the full width of the page. You can set the background-size to contain and no-repeat it, but that’s not going to stretch the full width like you want.
Not sure how you envision this working out with the current images…
What we want is for these current images to completely fit into the background area and not just to have the top of such images show in the background area. So it is not strech but fit, I guess what we want.
No, the top of 1/2 of the Photos are showing up in the space designated as the
background-image: url(<?php echo '\'' . $model_url . '\'' ?>);
background-size: cover;
How do we do that?
I mean the width of the screen varies as peoples computer screen width varies, and that is why the width is set by percentage to be 100% and not by pixels.
Unless I’m misunderstanding then you cannot stretch this image to fit all screen widths without also increasing the height at the same time otherwise you will lose the aspect ratio of the image. You could just stretch the width of the image and leave the height alone but that would result in a stretched image which has lost its aspect ratio.
Background-size:cover increases the width and height of an image until the image covers the background it is applied to. That means a small image will perhaps only show a portion of the original image in order to maintain the aspect ratio.
What most people do is use wide images to start with say 1600 x 300 (or whatever) and in that way you can scale smaller ok. As Ryan said the images you are using are not suitable for full screen backgrounds unless you create them wide to start with.
It’s a question of logistics and how do think that this image can fit across 1920px whilst still keeping its height unchanged and its aspect ration maintained? You can’t do it.
You can make it a little better by centring the background-position but what you really need is to create more suitable images.
But these Photos when resized to W 1600 Px do not have H of 300 Px but H of 1070 Px.
And we do not want to cut down these photos to H of 300Px since that would be same bad result.
Or are you saying that only Photos of 1600 x 300 should be used for such background images which would be very unwanted outcome.
Or did I misunderstood what you were suggesting.
You need to create images that look good at the height that you want then to display.
I don’t think you have stated your case correctly and we may be talking at cross purposes.
What is is that you want to happen? What would be your preferred result when the screen was wide?
We’ve outlined the logistics and you know that for the image to fill the width then the height must increase or you will lose the aspect ratio. How do you envisage the image looking at a wide width?
You either let the image get taller as it gets wider as in thesedemos or you start with a wide image and scale smaller less of the image as it gets smaller. As the image gets wider you see lose some of the image but if the image is chosen carefully then this does not matter much. You should avoid images that are square to start with.
1st, thanks for those examples you have provided. Functionally they are doing exactly what we want. That is we want images to fit into that area on top of our Home page, and then to have a slide show effect where they slide from left to right gradually. And do not want to use any JQuery, but CSS only and JSCript wold be OK, but prefer CSS only.
So if you can provide the exact CSS code we should use for this purpose and 2 sample fotos to make sure we are using right foto sizes, or just tell me what size we should crop the photos that were currently using to fit in that space that would be great.
Also, if you prefer we can pay you for 1 Hour of work to create this CSS effect for us.
You should be looking at images that have a letterbox aspect ratio so that they start wide and can scale small as shown in those examples above. It means choosing your images carefully so that there is detail all the way along but keeping the important part in the middle.
Using one of your image this is roughly what you should be looking for.
As you can see I can’t just crop a small image and make it larger as you need to choose suitable images to start with that have detail to the sides of the main focus.
.
