Bueno background

  • Author
  • #540365


    I am wondering how I find out what the size of the bueno background is in pixels, as I want to upload an image to fill the screen and don’t want it to tile. I’ve looked through the forums but havent had any luck so far, i’m sure its something really simple, but its eluding me…

    Thanks so much!

    The blog I need help with is kerrymurrayphotography.wordpress.com.


    The size of the actual “body” background is totally dependent on the width of the browser window and the resolution on the monitor on the system viewing it. Bueno uses tiled images for the standard body backgrounds.

    The issue with using a single image is that to cover all possible monitor resolutions, you would have to use an image about 3000px wide by 2000px tall, and even at the lowest jpg setting that is going to be a huge file (size wise) which is going to cause your site to load very slowly and slow loading websites are one of the things people dislike most on the web and normally they will just hit the back button or go elsewhere.

    Also, the search engines are now considering page load times when they calculate search engine ranking and page rank. Slow sites get low rankings.


    Ah! hadn’t thought of that, but you make a good point. Thanks for your insights.



    Hi, Path. I’ve created a custom background for my Bueno page and it’s 44KB. What do you think? Too big? It loads well on my computer, but I have a very fast connection.



    No, 44k is good. The issue comes in when they get much over 100k, especially if you happen to have image heavy posts, such as with a photography blog like the OP has, since there are a lot of other images to load as we. For photography blogs, I typically recommend a very simply background either using a tiled image, possibly a gradient, or a solid color.



    Cool, thank you! Generally speaking, when calculating image size in posts, should one consider the total bytes of all the images together or simply image by image? So for an image heavy post, which is what I tend to have, should I try to keep the sum bytes of all the photos under a certain total, or merely worry about each individual image being under a certain size?

    Thank you again!


    Image by image is fine. I typically try and keep mine between 50 and 75k each and then also set my blog to display perhaps 3 or 5 posts per page at settings > reading. That way everything loads fast.



    Fantastic – thanks!!!


    Thanks to both of you, mine is a photo blog too, so this is all very good to know!


    @followmyfilm: Just visited your blog and im really loving that gradient background business you got going there… is that the 44k file? it looks fantastic, and loaded fast, but my connection is fast anyway so maybe not the best judge… How big is that in pixel ratio? Thanks.


    I’m not exactly sure how followmyfilm did it, but the best way is to create the gradient at the length you need (setting a background color for it to blend into at the bottom and wide enough so it is easy to visualize and get the colors correct, and then you actually change the width of the image down to 1px wide and save that image as a 24-bit png. Then when you put the image in, you set it to repeat in the x direction only. A 1px wide, image, even 600 or 800px tall will come out under 5 or 10k and load like lightning.


    awesome! x being the horizontal direction, no? i’m not too clued up with html, but learning as i go… What is the advantage to saving at as a 24 bit png instead of jpeg?
    Thanks so much for all your help!!



    That’s really interesting, @path! 1px wide! Wow….

    @kerry, I created the gradient in Photoshop. Sorry if you don’t have that. I’m no pro and it always takes me a while to do tinker in Photoshop. I created the gradient because I didn’t like the way it looked when it was tiled.

    See, when the image goes from one color to the next and stops there, then the two colors “bump” into one another when tiled. But when you create a gradient that returns to the first/top color, then the tiling flows seamlessly.

    E.G., red to white gradient. If you create a background that goes from red to white and stop, the white will bump up against the red when tiled. But if you go red to white to red in your background image, then the two reds will bump up against one another and you won’t see the tiling!

    My image was 2000×3500 JPEG. However, it’s a small file size because I can adjust the file size via quality in Photoshop when saving.

    Hey, it’s Thanksgiving! So if you want, I can create a background for you!!! You can contact me through my blog :)


    JPG is typically used for photographic images where PNG is typically used for graphics and such with large bands of colors. JPG would be fine for a gradient, and would actually probably produce a slightly smaller file size.

    I sort of got carried away because doing an x direction repeat can only be done with the CSS upgrade. It can’t be done through appearance > background so that’s probably not an option for you.


    @path: No, i tried it and it worked, you can do it without the upgrade, you just choose to tile horizontally… but it was really low res and pixelated, which might have been because of how i saved it from photoshop… haven’t had a chance to give it another try today.

    @followmyfilm, so you kept those dimensions but rolled the quality all the way down when saving the jpeg? Im going to give that a try. Thanks for the thanksgiving offer, but i’m relatively good with photoshop (spend more time in there than I would like to every day!!) But thanks so much for the help you’ve given me so far!

    And happy Thanksgiving to both of you, im not sure if its today… i’m in Portugal, so completey unfamiliar with this holiday


    Ah, OK I didn’t look at the backend of bueno and didn’t remember that you could restrict it to just tiling horizontally.

    It well might be the way the file was saved unless bueno is doing something strange to the file.


    Here is a 1px x 500px tiled gradient (jpg) on my test blog. Obiously too dark for the bueno theme, but I had it laying around on my desktop from work on a client’s website.


    Sheesh I forgot the URL to the sample.



    cool, thanks. looks way better than mine did, so will save it again at a higher quality and see how it goes.

    ps. your image test bunnies look a bit evil… :)



    @kerry. You’re welcome! And too bad you all don’t have Thanksgiving in Portugal :( Though I’m sure you’ve got your own version of eat-great-food-for-an-entire-day holiday!

    So, yeah, I just saved a smaller version in Photoshop using “Save for Web Devices.”

    @path: I’m amazed at how great your gradient looks with the 1px trick! Amazing. I unfortunately cannot do that since my gradient is on an angle.

The topic ‘Bueno background’ is closed to new replies.