Why does my responsive image not display the whole image for all website visitors?

It is common for websites to feature large scale background images. This is most commonly seen in the top portion of a website when a visitor first pulls up a page. For the sections on your website that contain an image in the background, it's possible that depending on the screen size the image may be trimmed off a little bit on certain areas or look like it's "overflowing the container". We do our best to minimize how much of the image gets trimmed by adjusting the background image placement, but with the diversity of screen sizes, technology is simply limited on how we can control this. 

There is a background property that we apply to background images called "cover". It simply declares that any image that is set to be a background always cover the size of it's container. So if a container shrinks or grows, the image always fills that container, or "covers it". 

Let's say for example you have a banner image that's 2000px wide and 500px tall. If you try to stretch that image across a larger screen such as a 27" monitor you'll have the image trying to render itself at 3000px wide by 800px tall. This conflicts with content being pushed down below the image and the image trying to render at such a large size it will either lose most of it's quality or slow down the page load time. The cover property helps this by truly being an out of the box responsive approach to growing containers and image sizes.

To summarize: the cover property means the entire image remains full width, but sacrifices the height depending on the size of the screen. If the image was NOT using cover property, then the image remains full sized, but does not stretch full width to suit the container of the screen and is therefore not considered responsive.

What if I create an image that has text embedded on it?

We do not recommend creating an image with embedded text for many reasons. One reason is that the image text is not crawlable by Google, so your text is not being associated with your site or its page. For instance, if you wanted to promote a special event and created an image with the date and time of the event, search results would not pull this up. But if you create an event and insert an image, and then within the body of text on your website put the date and time, this content will be searchable for website visitors.

Another reason it is not optimal to embed text in images is because your website visitors may not see the full image (and therefore the text) when they come to visit your website.

Here's an example of a full image where it can be fully displayed on the website:

Here's an example of when text does not display based on the Cover Property and the viewport size: