How to add in an background image in a scroll view image

Question

i will like to add in a background image bgImageView.image = [UIImage imageNamed:@"frame_trans"]; for each image in the scrollview, however the scroll view expand instead of adding the image behind each image, what have i do wrong ?

EDIT: working code added, thanks to ColdLogic.

this is my old scroll view

i wanna add in a paperclip

but the current code do this.

CODE:

//init scrollview in location on screen
//scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(30, 100, 278, 290)];   
//scrollview.backgroundColor = [UIColor redColor];
//pass image filenames
NSMutableArray *fileNames = Info.imageFiles; //[[[NSMutableArray alloc] init] autorelease];
//setup the array of uiimageviews
NSMutableArray *imgArray = [[NSMutableArray alloc] init];
NSMutableArray *bgImgArray = [[NSMutableArray alloc] init];       
//loop through the array imgNames to add file names to imgArray
for (NSString *imageName in fileNames) {
    NSString *tempIMGName = [NSString stringWithFormat:@"data/%i/%@",Info.ID, imageName];
    NSLog(@"tempIMG %@",tempIMGName);
    UIImageView *imageView = [[UIImageView alloc] init];
    UIImageView *bgImageView = [[UIImageView alloc] init];;
    imageView.image = [UIImage imageNamed:tempIMGName];
    bgImageView.image = [UIImage imageNamed:@"frame_trans"];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    CGAffineTransform newTransform = CGAffineTransformMakeRotation((CGFloat)(-3 * M_PI / 180.0));
    imageView.layer.affineTransform = newTransform;//CGAffineTransformMakeRotation(degreesToRadians(10));
    [imgArray addObject:imageView];
    [bgImgArray addObject:bgImageView];
    [imageView release];
    [bgImageView release];
}

CGSize pageSize = scrollview.frame.size; 

NSUInteger page = 0;

for (UIView *bgViewForScrollView in bgImgArray) {

    [scrollview addSubview:bgViewForScrollView];

    bgViewForScrollView.frame = CGRectMake(pageSize.width * page++ +10, 0, pageSize.width -20 , pageSize.height);


    // making use of the scrollView's frame size (pageSize) so we need to;
    // +10 to left offset of image pos (1/2 the gap)
    // -20 for UIImageView's width (to leave 10 gap at left and right)

}

NSUInteger page1 = 0;
for (UIView *viewForScrollView in imgArray) {

    [scrollview addSubview:viewForScrollView];
    viewForScrollView.frame = CGRectMake(pageSize.width * page1++ +10, 0, pageSize.width -20 , pageSize.height);

    // making use of the scrollView's frame size (pageSize) so we need to;
    // +10 to left offset of image pos (1/2 the gap)
    // -20 for UIImageView's width (to leave 10 gap at left and right)
}

//add scroll view to view
[self.view addSubview:scrollview];
[self.view bringSubviewToFront:scrollview];
scrollview.contentSize = CGSizeMake(pageSize.width * [imgArray count], pageSize.height);

//scrollview.contentSize = CGSizeMake(320 *viewcount + 20, 290 );
scrollview.showsHorizontalScrollIndicator =NO;
[scrollview setPagingEnabled:YES];
scrollview.delegate =self;

Answer 1

The problem is that you are using page++ when you are create the frames for the background views and then not resetting it when you start creating the frames for the images. page will have a value of 3 going into the for loop for the imgArray, making it place it at a 4th index.

for (UIView *bgViewForScrollView in bgImgArray) {
    //code
}

//ADD THIS LINE OF CODE
page = 0;

for (UIView *viewForScrollView in imgArray) {
    //Code
}

Answer 2

You should be adding the background number images to the scrollview and to each of them adding a subview for the paperclip image.

[bgImageView addSubview:imageView];