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

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.

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.

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,

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

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

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.

You’re welcome.

1 Like

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

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.

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,

Most of the stock photo sites allow you to search for orientation of image but of course you may need ot pay for the images. There are quite a few images here and this was my first try.:smile:

Paul,

Do you have any place we can grab such Wide shot Photos for free?
Of World Cities or Nature of People.

Much Thanks.

You could try Pixabay. Their images are free to use, although whether you’ll find what you want, I don’t know. (Some of their links go to Shutterstock, which is a paid service, but they’re clearly marked. Just stick with the Pixabay images if you want free ones.)

There are also a number of threads - mainly in the Content category - with suggestions for free image services. Have a look around there. This is one of the most recent:

TechnoBear,

Thanks man.
I will check out both of these sources.
FYI, it is not that we are cheap, it is just that we are a non-VC funded, Social Search engine, trying to give People an alt Choice to Google and Big Wall Street Media, so we need to save on every corner that we can and unless we have to rather not buy something and get it for free as much as possible,

No problem. Free sources are there to be used, so why not use them? I mostly take my own, but I’ve used a couple from Pixabay.

Now there’s a capital idea.

Mini-vacations to world cities for the purpose of taking photographs could be considered as a business expense. :ship:

1 Like

TechnoBear

I spent 2 Hours looking through those Links you have provided and in NONE of them I could find Photos of World Cities that are:

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

Amazing :frowning:
Any specific suggestions are highly welcomed.
Regards,

Perhaps if you defined what “World Cities” actually means, we might be able to help.

For example, I searched google for “city widescreen photos” and found photos of New York, Chicago, Tokyo and Stockholm

Perhaps try searching for “famous landmarks widescreen photos” (found Rome, India, China, etc) or something similar

Or look for specific city landmarks (ie “Big Ben widescreen photos” or “Great Wall widescreen photos”)

Or even try searching for “panoramic photos”

1 Like

Hi Dave,

“World Cities” means exactly: New York, Chicago, Tokyo and Stockholm, etc.
Basically the top Cities of the World, and that generally means the Capital, but can be others.

But please keep in mind that as per discussion above, we need Photos that are:

“High resolution photos that are letterbox proportions and have smaller central focal point”

And free would be great.
Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.