Blog Background: Take 2

I've been noticing that my blog background takes some time to load. Not surprising since it is quite a large file, as the image itself is quite huge (2000px x 1000px).

But it need not be that way. My background is a simple repeating image. I thought I needed it that big so it would scale to the size of the window, but upon further thought, I believed I could achieve the very same look but with a smaller image, and hence reduce load times.

First, I cropped my background image to the smallest repeating pattern, which is this:


Changed the repeat to repeat instead of repeat y (or just removing this would work too as the default is repeat x and y), changed to scroll instead of fixed (or just remove as again the default is scroll), and played around with the size until I thought the pattern looked right (not too big and not too small). That number ended up being 3%.

And just like that I went from a file size 641kb to 12.5kb and got the same look!

Continue Reading...

Translucent Backgrounds and Round Corners

One of the rules defined in CSS3 is opacity of background images. The moment I read that I knew I'd be taking advantage of that feature to do something I had in my head.

I wanted to make my outer-wrapper container translucent, so that it frames the entire blog but still shows a bit of the beautiful background I've got going on. So I set the color to white and then added the little bit of code for opacity. Easy peasy! Right?!



Wrong! Turns out, this affects everything inside the container. All the text all the images are now also transclucent. Not what I was going for!! So after a bit of digging, it turns out the best (only?) way to do this is to create a transclucent png image and use that as a background image.

So I just created a small wide transclucent white image to use.

I used the same CSS code as for my body background. Size 100%, fixed, repeat y, and voila, that's what I wanted!



Yet, I don't know if it looks all that right. I'm leaving it for now, we'll see how it works as I add graphic elements like the header graphics etc.

Ok, one more thing here, I'm adding round corners to my containers. I just really don't like how square corners look, here or in real life. When I do wood projects, I pretty much always sand down the corners and edges so they aren't perfectly square.

Following this tutorial: Rounded corners using CSS without Images.

Of course things are never that easy. I should have seen this coming. Rounded corners are a property set to borders, which means I needed to add a border, which I don't necessarily want. So fine ok I set it to white, the same color as the background, it won't show.

But then I forgot that adding a border to a container contributes to it's width, and since I already took up all the available width as I mentioned in my last post, so the sidebar fell off below the main post area. Easy enough fix, remove 1% from one of the widths. Now I just hope it doesn't break at a small screen size.

Continue Reading...

Setting the Body Background Image

The background image, or graphic, was one of the first graphic elements I made for the new design. I knew I wanted I pattern, and for it to be predominantly white, yet still quite colorful.

I'd found this graphic designer, Delicious Scraps, and I loved her stuff because you could use them to create your own graphics with them using your own color scheme. Perfect! Exactly what I needed since I hadn't yet found a scrapbook kit with a color scheme I liked and elements I was longing for. And I can pretty much guarantee no one else will have the same background as me!

So, first order of business: make the background image. Oh wait, back track a second. First order of business: choose a color theme!! Ha! Ok, well since I've already started with this post, I will cover how I chose my color scheme in an upcoming post, that sound good?

Ok, second order of business: make the background image. I looked through all the free pattern templates at Delicious Scraps and chose the one I liked best. This one to be precise:


Curtesy of Delicious Scraps

I wanted each layer of circle flowers to be a different color (the solid vs the paller one), and the dots an other. They all come in different files when you download the template. But I could not figure out intuitively how to do it in Photoshop! I thought I'd be able to do it with the overlay property, but it did not give me what I wanted at all!!

So I turned to all mighty Google, but I wasn't sure exactly how to phrase what I wanted to do. My first couple of searches came out fruitless, and I was almost ready to give up when I came upon this tutorial (for digital scrapbooking). I almost discard it because there were no pictures and it was using a different version of photoshop than me, but I figured I'd better try, and it worked!! Exactly what I wanted!!

I was now able to color every layer a different color, and because they had a transparent background, I could easily put them one on top of the other. Hooray, background graphic: Check!

With the background image in hand, I had to figure out how I wanted to place it. Here's a good tutorial to know your choices: How To Use a Background Image for Your Blog .

I wanted my background image to be scalable, proportional to the width of the window of the browser, since I'm going for a responsive design. I don't know if I'm making sense... I knew from my past (current?) background image that it looks slightly different for every device/resolution seeing my blog; it's set to background fixed and no-repeat. Someone with a big screen/resolution (Desktop computer) would see quite a bit of the colored part of the background (right, below) and that's the way I intended it to look like when I designed it; whereas someone on a smaller screen/resolution like a 15" laptop (my work laptop; middle, below) would have the background cut off where the lacey borders are and barely see the rest of the colorful background. And who knows what someone on a tablet or phone would see, probably not much if it follows the trend. (Note to self, check on bf's tablet and iPhone)

Click to enlarge in LighBox

The point is, I don't want the flowers to look huge in the background of a smartphone. Which is what I think it would do if I code it the same way as I've previously coded it. I also needed to figure out the biggest size of monitor it would be seen on. If I didn't make the image wide enough for the biggest screen, then there would be white space somewhere to compensate.

With that in mind, I thought my best bet would be to make the background image itself responsive, but was it possible? Apparently, with the new CSS3 rules, it is! Check it: CSS3 backgrounds. It would still mean that anyone with an older browser would not see it properly, but I think the majority update their browsers, right?

So here we go. Try 1, I set background image to fixed, no-repeat and a width of 100%. BTW, the image I made is 2000 px by 1000 px. And I always prefer fixed, I don't like it when it scrolls, I find it too distracting, especially when it's a busy pattern.


Please don't mind that the text is unreadable now. I'm fixing it after, and it's quite easy: just color the background of the main sidebar and header containers white.

Problem numero uno: If you're on a widescreen viewing the blog, the background isn't tall enough to cover the whole height of the screen! Which means the background image needs to be higher than it is wide for widescreens in landscape mode. But, thinking ahead, for portrait mode, then I would need it to be wayyyyyyy higher than wide, which would make for a huge file. There's gotta be an other way. (If you see how to fix it at this point, unlike I did, you can skip to the end ;) )

Try #2: Let's just see what it would look like without specifying the width 100%. (I'm really kicking myself for not thinking of the right fix!!)



Ok, well it fixes the above problem (I think, can't check on more devices...), but I don't like the size of the flowers, I really liked them smaller. And anyway I really want it responsive. Even if I were to adjust the image to have a higher density of flowers, it wouldn't scale.

At this point, I had to leave it be cuz I had other things to do. And then it came to me while I was taking a shower. It was so simple really, why hadn't I thought of it before?

Try #3: background width to 100%, fixed, repeat-y!!!! Duh! If it's not high enough, just repeat the pattern vertically, as long as it is a (seamless) pattern, it won't even show.

And with that, TADA:



Perfect! Actually, I might edit down the background image to the minimum repeating pattern, yet still keep the same width (might also make it less wide, and therefore the flowers slightly larger). That way, the file size of the background image will be smaller, and it should lead quicker. The background image and header image are the biggest graphics of my current blog, and what slows it down a lot right now.

One of my objectives with this design was to minimize the loading times by optimizing the images (not make them too big), and using more CSS to do what I want to do. Which is what my next task will be: make a white background for the containers containing text so they are easier to read. That or/and make the container sizes responsive. Should be easier enough.

Ha! Cuz adding the background was so easy, right?!

TBC...

Continue Reading...