Jump to content

Background Picture Dimensions


Recommended Posts

This SHOULD be a quick question, how many pixels is the length of a background picture to fit perfectly on both side of the cache page? If you are confused by what I mean, where you can insert a picture to be displayed in the background of the cache page, and it shows up on both sides. How many pixels wide is it?

Link to comment
1 hour ago, WerewolfToGhost said:

This SHOULD be a quick question, how many pixels is the length of a background picture to fit perfectly on both side of the cache page? If you are confused by what I mean, where you can insert a picture to be displayed in the background of the cache page, and it shows up on both sides. How many pixels wide is it?

 

If you're hoping to fill the margins with an image, do google searches for background image tiling, "seamless" tiles, and CSS scaling.  You can tile a repeating image automatically by adding its web address  to the Background Image URL block on your cache page.  Then the margins are filled regardless of browser window size.  Remember that a phone's web browser tends to fill the screen and no background image shows on the sides.

 

All of my cache pages have a rather small tiling background.  Most of mine have a solid color.  Horton Soul has a tiling background of trees.  The first screen shot has images tiling to a width of 2200 pixels.  The browser was not completely filling my monitor.  The two screen shots below show that the centered cache page slides along the background as the window size changes.

 

Untitled-2.jpg

 

 

Edited by kunarion
  • Upvote 1
Link to comment

Inspecting the elements of a cache listing, the DIV element that contains the main content is 970px wide, with a 20px padding on both sides. So the width of the white content area is 1010px wide, and the background image is visible for anything beyond that.

 

Until they tweak the design again.

  • Upvote 1
Link to comment
28 minutes ago, kunarion said:

 

If you're hoping to fill the margins with an image, do google searches for background image tiling, "seamless" tiles, and CSS scaling.  You can tile a repeating image automatically by adding its web address  to the Background Image URL block on your cache page.  Then the margins are filled regardless of browser window size.  Remember that a phone's web browser tends to fill the screen and no background image shows on the sides.

 

All of my cache pages have a rather small tiling background.  Most of mine have a solid color.  Horton Soul has a tiling background of trees.  The first screen shot has images tiling to a width of 2200 pixels.  The browser was not completely filling my monitor.  The two screen shots below show that the centered cache page slides along the background as the window size changes.

 

Untitled-2.jpg

 

 

Well you see I wanted to use custom images. _Superman_ has custom gifs on his caches.

Link to comment
2 hours ago, WerewolfToGhost said:

Well you see I wanted to use custom images. _Superman_ has custom gifs on his caches.

 

I have custom background images on all my cache pages as mentioned.

 

If you mean a page like this one, that is a tiling image.  This image, but his file is being hosted off-site.  It's a better idea to save it to your own Gallery or to the cache page's Gallery.

 

You will first need a suitable web page image (such as a GIF or JPG). Upload it to your cache page gallery (using just the Upload part of those instructions, for a background image you don't add the image to the cache description).  Click that image to be sure you get the correct web address, and only that image is in view.  Copy that web address ending in GIF or JPG.  Edit your cache page and add that web address to the "Background Image URL" block on your cache page and save it.  The background image will repeat to fill the page automatically.

 

 

Edited by kunarion
Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...