mariposabeing a collection of backgrounds free for any use. credit is appreciated but not required.
the news feed
now listed at directly!
nine more 2560 x 1600 non-neopets backgrounds added in. enjoy!
october means halloween, and Halloween means 30 new autumn and Halloween themed patterned backgrounds. Also, Malisha was looking for some.
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.
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!
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?
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
premade layouts, code tutorials, and requests can be found there
if you wish to credit beetle for your background you may
affies coming soon?
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
- mariposa means butterfly
- credit optional means you don't have to credit if you don't want
- because neo is a place to have fun and i don't like stress
- yes, mariposa used to be beetle backgrounds
- because i fancied a change and butterflies are as cool as beetles
transparent patternstransparent 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 backgroundsall backgrounds are 1920px by 1080px
full screen backgroundsBackgrounds 2560px by 1600px
Backgrounds 1920px by 1080px
Backgrounds 1440px and wider
Backgrounds 1024px and wider
using backgroundsvery basic
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
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.
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.
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.
you can include whichever properties you like, but they must be in the order above (colour, url, repeat, attachment, position)
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:
« img src = "url here" class = "background" style = "position: fixed;" »
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.