How do we make the background image to show in Full?

HTML & CSS
1

Hello,

We are trying the new look for our home-page where the background image takes the entire screen area.
However the images we are using as the background image are getting cropped at the Top and Bottom of the image, resulting in not the best look & feel that we would like.

As an example, here is the image that should be loaded:

1240×369 72.9 KB

Instead this is what is being displayed:

And here is the CSS code we use for this is:
.bg_w_foto {
background: url(images/cities/<?php echo $city_name; ?>) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Do you have idea how to solve this? So that entire image is stretched to display as the background image.

Thank you.

2

You have the element set to have a height of 250px.

<td class="bg_w_foto" valign="top" height="250" align="center">
3

Your background is applied to a cell in a single table row, so it will never extend beyond that one row.
I don’t want to sound harsh, but you need to join us in the 21st century and stop using tables to layout your website. Then great thing will start to happen, for one you will solve this problem.
This is the css I use for full screen backgrounds:

    background-image: url(../images/backimg.jpg);
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

Note, this is applied to <html> or <body> element, not a table cell, that way it is the whole page.

5

You can’t stretch an image to fit its container dimensions because that would squish the image and would look bad. You have to maintain the aspect ratio when resizing images and that means that when the width is increased then the height must also be increased accordingly which will maintain the correct aspect ratio of the image.

Background-size:cover take an image and make sure that the image fully covers the container it is placed in but in order to maintain the aspect ratio the actual image will of course need to be bigger than the container (unless by some chance their aspect ratios are the same).

If you think carefully about what you are asking then how else could an image cover the background. You can’t just stretch the width and height to fit as that makes the image distorted.

As mentioned above if your image was a full page image then there is not much of a problem as it would fit better but as you are trying to squeeze it into 250px height then something has to give because the width of the image needs to be very wide to fill the screen.

When you choose images you should take this into account and its better to have images that have a smaller centred focal point which will make it better when they are scaled to bigger or smaller screens. If you only want a narrow letterbox effect then choose images that have better aspect ratios for that and not nearly square like your image above.

1 Like
6

WebMachine, sorry if I was not clear. We want the background image to cover just that Cell of the Table and not the entire home-page. So we want it to stretch to display fully in that Table column (cell), and not the the entire home-page but for the image not to be cropped at top and bottom as it is now.

Thanks

7

SamA74, Ditto. We do not want the image to cover the entire Body but that just area (cell) on top of the home page.

Thanks,

9

Change:

background-size: cover;

to:

background-size:100% 100%;

The image loses its aspect ratio but you get your wish.

:shrug:

1 Like
10

Sorry I misunderstood from this line;

But to illustrate what Paul said about aspect ratio, this is how it looks with background-size: 100% 100% as ronpat suggests (with a shrug).

1204×575 99.5 KB

The whole image is visible, but the bridge appears squashed. Because the height is fixed it squashes more the wider your screen is. Is that what you want?

11

Well the loss of aspect ratio, makes the bakcground images to look horrible :frowning:
So that is not acceptable solution obviously.
So then what should we do? Have images that are shot with a Wide Lens?

12

Well of course this is not acceptable.

So what should we do?
That is how should we have background images over that Cell which is not cropped at top & bottom?
I guess answer is to have Wide Angle Shot? Right?
If yes, can you suggest where is best place to get such Photos?

Regards,

13

Yes, I explained in my post that you should choose images of letterbox proportions and not square. Its a simple mater of mathematics and very little to do with css. :smile:

You can’t stretch an image unless you maintain aspect ratio so wider images mean taller heights as well if you want the whole image. How else can it work?

I’m afraid I don’t have any suggestions for where to get images from as I leave that to the designers to come up with but you must choose carefully and I would choose images with a smaller central focal point so that when stretched they still stay in your letterbox view.

14

You have heard of square pegs and round holes?

Will it’s not a round hole, but same principle. You are trying to put a shoe-box through a letter-box, it does not fit! You must either chop it or squash it to fit.

Either be happy with that shot cropped, or find a shot in a wide aspect.
In addition, if you want to retain a fixed aspect (have no cropping of your wide aspect image) don’t have a fixed height combined with a variable width as you have.
So you could have width: 100%; height: 20%; I say 20% there, but whatever % creates the desired aspect.
I have exactly that here, all the header photos are 900 x 200 px in size (also set in the img tag), in css the container has max-width: 900px; and the id for the image is 100%; height: 20%; to maintain that aspect.

15

SamA74,
You should read before throwing and insulting response!
As stated already, we have already arrived at what you have stated with your insulting “square pegs and round holes” analogy and are now at the phase of asking:

“where can we find the suitable photo dimensions”?
And also as per PaulB suggestion Photos that have “images with a smaller central focal point”.

To be exact, we need then the correct Photo dimensions, which are high quality (resolution) of World Cities. So where can we get or Buy the Photos which would fit this theme and are:
" letterbox proportions"
&
“have smaller central focal point”.

Thanks,

16

Sorry, I did not intend to sound insulting. My apology for any offence.
I was just trying to illustrate the point so it was easy to understand, I got the impression you had difficulty grasping the idea.

There are no end of photos available on the web. Some paid for, some free. For free ones there are many threads here already mentioning sources, just search “free photos” or similar to find those threads. Or try a Google Image search, filtering for those labeled for reuse.
https://www.google.co.uk/search?q=golden+gate+bridge&source=lnms&tbm=isch&sa=X&ved=0CAcQ_AUoAWoVChMIpanIjZauyAIViQMaCh2-xQte&biw=1330&bih=923#q=golden+gate+bridge&tbm=isch&tbs=sur:fc

17

To expand on this (before Paul pulls me up on it :smiley:). It may be better to set height: auto; instead of a percentage.

18

That link leads to photos of Golden Gate Bridge only.
We need Photos of World Top Cities (Sites), of which of course GG is one.
And of course as per this discussion we need the Photos to be:

High resolution photos of Cities that are of letterbox proportions and have smaller central focal point

FYI, I have searched for this phrase on Google and have found nothing really.

So any suggestions where we can find such photos for free or paid, would be great.

19

You’re welcome.

1 Like
20

I can’t help you with finding images I’m afraid but just to illustrate the point I have been making if you choose this image from the link that Sam shown above and test it instead of your own image (also change css to background-size:cover) you will see that it scales much better and doesn’t lose its impact.

1 Like
21

You will need to apply art direction and crop the image.
Scale it to ‘cover’ the area, then offset to get the ‘crop’ you desire

.bg_w_foto {   
 background: rgba(0, 0, 0, 0) url("images/cities/golden_gate.jpg") no-repeat scroll 0 -330px / cover ;
}

You will need to adjust the offset based on responsive breakpoints, or accept the fact that the image may scale beyond the crop you desire.

22

Paul,

As I replied, we have ALREADY chosen that wide image of GoldenGate. We just need more such images of World Great Cities (sites) beside that one image. And as I wrote I searched online but so far cannot find any more such wide images for free or even for paid.
That is why I was hoping you all could suggest a good site for such Wide images.

regards,