Background images can be created and added to your CSS to go behind text and images on your mobile site. This method of adding background images will create backgrounds for individual pages, this allows you to have multiple background images on your site and pages without background images.
Create a background image
**please note: The width of the iPhone screen is 320px so that should be the max width to ensure that your image doesn’t get cropped or altered.
1. Upload your image into the content editor.
2. Open your CSS document and scroll down to the IPHONE CONTENT OVERIDES section. You will see this at the top of the overrides section:
body.mobile form {
margin:0;
padding:0;
}
body.mobile #footerwrap {
border-top:0px solid #000;
}
You will insert the custom CSS text after the body.mobile #footerwrap{ border-top:0px solid #000;}
4. Insert this code into your CSS document:
#iphonecontainer #ContentGroupID- – - – {
background: url(‘../dynamicimage.aspx?id=- – - – ‘) repeat;
width: 100%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
5. ****important note: the – - – - after #ContentGroupID are placeholders. When you decide what page the background image is going on, look at the URL of that page. It should look something like this:
http://yourbusinessname.everywhereigo.com/CMS/MobiRenderContent.aspx?contentGroupID=3705
The number at the end of the link will go after the ContentGroupID in the CSS. It will look like this:
#iphonecontainer #ContentGroupID3705{
6. ****important note: once you have uploaded your background image into the content editor it will be assigned a url or “image location” that will look like this:
https://phindme.net/DynamicImage.aspx?id=2712
You can find this location by right clicking your image as it appears in the preview window in the image manager within the content editor. The last 4 digits of this address will go after dynamicimage.aspx?id= in the CSS. It will look like this:
background: url(‘../dynamicimage.aspx?id=-2712′) repeat;
7. The section of code shown in (4.) can be copied and pasted as many times as pages you have on your site. Make sure to change the content group id# and the dynamic image # to correlate with the web page and background image you want for that page.
8. You will notice that after the image number the code says repeat; this means that if your background image is for example 100px high and your web page is 500px the image will be repeated to fill the extra 400px.
If this bothers you, try making an image that has a similar shade and pattern at the bottom and the top so that the transition is less noticeable.
9. If you do not want the image to repeat simply replace repeat; with no-repeat;. If the image is not repeating you should try to make the image size the same size as your page so there is no white space at the bottom.
scroll through the content or if you’re using navigation elements within the content area. In order to turn these off all you need to do is go to the Design Your Site page, scroll to the middle of the page and check whether you want these links visible or not. You also can add a “Back” button for smartphone sites that will allow your user to navigate back to the previous page. This feature is especially helpful when converting our sites to an application.
Go To Everywhereigo
