being a collection of backgrounds free for any use. credit is appreciated but not required.

the news feed
7th october
now listed at directly!

5th october
nine more 2560 x 1600 non-neopets backgrounds added in. enjoy!

2nd October
october means halloween, and Halloween means 30 new autumn and Halloween themed patterned backgrounds. Also, Malisha was looking for some.

20th september
you know what's awesome? getting back from a few days away to find that rico has made you a button. that's what's awesome.

14th september
usage notes sorted, and that's the last section! let's get this show on the road.
and! first link back button, a collab between sunny and me. innit pretty?
and and! second and third link back buttons made by the almighty jewlz, more pretties!

13th september
60 new backgrounds to a new section that beetle never had, the non neopets full screen backgrounds. and a further 32 to another new section, the transparent texture backgrounds. because why ever do anything by halves?

12th september
layout complete, all existing backgrounds moved across from beetle backgrounds, and mariposa has a sister site - the fabulous auxillium! off to a good start, methinks
mariposa is part of the beetle family of sites
premade layouts, code tutorials, and requests can be found there
if you wish to credit beetle for your background you may

sister site
auxillium is a graphics resource site run by the ever-proliferous sunny. help yourself to backgrounds, a myriad of textures, and a beautiful array of bases for your own graphic making endeavours. go forth friends and create!

link back

link out

affies coming soon?

link listers


background image from dream-wallpaper

backgrounds are sourced from
subtle patterns | transparent textures | dream-wallpaper
pixelstalk | oldtimewallpapers | wallpaperup | hd-wallpaper
wide-wallpaper | planwallpers | bg-repeat | colourlovers
some images sourced through imgur with no prior source given
if you see an image that has been improperly credited or should not be hosted here
please let me know and i will remove the image

with thanks to charly and ro for neopet wearable swf files

  1. mariposa means butterfly
  2. credit optional means you don't have to credit if you don't want
  3. because neo is a place to have fun and i don't like stress
  4. yes, mariposa used to be beetle backgrounds
  5. because i fancied a change and butterflies are as cool as beetles
anything else? you can reach me here

patterned backgrounds

transparent patterns

transparent backgrounds apply a texture to any base colour you choose - instant background recolouring
all backgrounds below are shown against a blue base colour
some patterns will add a lighter texture over the top and work best with dark base colours;
others add a darker texture and work best with pale colours.

neopets backgrounds

all backgrounds are 1920px by 1080px

full screen backgrounds

Backgrounds 2560px by 1600px

Backgrounds 1920px by 1080px

Backgrounds 1440px and wider

Backgrounds 1024px and wider

using backgrounds

very basic
« style »
body {
background: url( ' url here ' );
« /style »

where url here is the url you see when you hover over each background option.

below are a list of all background properties. you can use whichever ones
suit your needs, or you can combine properties onto a shorthand line
i've included a cheat sheet for the shorthand line after the list of properties

background-color: #ffffff;
sets the base colour of the page, here ffffff is white. for tiling images, this is the colour your visitor will see while the page loads. for non-repeating images, this is the colour of the background either side of your image. for transparent patterns, this is the base colour of your page that your texture is applied on top of.

background-image: url(' url here ');
specifies the image to use for the background. by default, the image will start in the top left corner of the page and tile across the page.

background-repeat: no-repeat;
used for full page backgrounds, this stops the image tiling. you can also use repeat-x or repeat-y for an image that repeats horizontally but not vertically or vice versa.

background-attachment: fixed
this fixes the background in place so that it doesn't move when the page scrolls

background-position: center top;
this allows you to specify a position for your background. the two values always go horizontal position then vertical position, and you can either use words (left, center, right and top, center, bottom) or use px values for an exact position. if your content is centered then your background should also be centered, or your layout could look strange on screens that are a different size from yours.

« style »
body {
background: #ffffff url( ' url here ' ) no-repeat fixed center top;
« /style »

you can include whichever properties you like, but they must be in the order above (colour, url, repeat, attachment, position)

resizing a background
there is a property called background-size which lets you specify the size of a background, but it doesn't work on neo. instead, use the code below:
« style »
.background {
top: 0;
left: 0;
width: XXXpx;
z-index: -1px;
« /style »

« img src = "url here" class = "background" style = "position: fixed;" »
swap position: fixed for position: absolute if you want your background to scroll with the page, but be aware that this background will be a single image and will not repeat.

to center your resized background, swap left: 0; for left: 50%; margin-left: -YYpx; where YY is half the width of your background

beware of percentage widths! it can be tempting to set your background to be 100% so that it fills the screen, but this can break your layout on screens that are a different size from yours.