The background image of my UICollectionView always appears smaller than the UICollectionView in terms of width and height. Here is the picture (The background white color is the whole UICollectionView size):
As you see from the picture, this causes the content to go outside of the background image. and when I scroll right, this happens (I cleared the background color of the CollectionView):
This is the size inspector of the CollectionView:
How can I reduce the size of the cells container inside the CollectionView?
Or what is the proper way to solve this issue?
Look in your screen shot at the bottom section, the View section. Just give the size a bigger X and a smaller Width. Even better, use autolayout to size the collection view relative to its superview.
As for your image, don't make it the background image of the collection view. Just make it an image that's behind the collection view.