Adjusting Image Width

Hi,

I am trying to increase the width of a background image to fit the navigation menu. What would be the easiest way to do this? I have Picasa 3, do I need a more advanced software program or can I code this into CSS? The image is showing 72x960 pixels, I would like to increase the width to around 200.

Thank you.

BB

It’s probably unfair of me to dump on ASP when I’ve never used it, but I see a lot of sites built with it and the code looks messy and ugly to me. There are certainly alternatives that I’d investigate first—ones that don’t bind you to Microsoft (ewww) and that are free. There are free PHP frameworks like CodeIgniter, but I don’t know if that’s designed to do the same sorts of things as ASP.

PHP is a big learning curve, and not worth investing a lot of time in unless you want to become a programmer. If you are web designer, HTML, CSS, JavaScript, some graphics skills and a good CMS are a better bet. (Many would probably disagree with that.)

Is javascript a necessary tool for web design?

It’s highly desirable, and I would choose this over PHP is you are mainly doing front end stuff. JS has a fairly steep learning curve, and a shortcut taken by many web designers is to get up to speed with jQuery, which is a library of scripts and functions ready made that you can basically just plug into your site and have all sorts of fancy features in a jiff. Worth checking out. Ideally, you’d learn JavaScript so that you understand how jQuery works, but this is not an ideal world.

My biggest fear is I will be good at coding and horrible at creating.

Look at beautiful websites and see how they’ve combined the two. It’s not hard to do the basics.

Thanks, I’ll start looking at some books and tutorials on graphics design and such. I’ve never heard of a content management system, or the phrase anyway, thank you. I read you’re blog about it, will definitely start looking into that. I had heard of WordPress just today actually.

So you’d recommend PHP over ASP.NET?

I’m looking at learning everything I can to get myself started, HTML/CSS were obvious. Is javascript a necessary tool for web design?

My biggest fear is I will be good at coding and horrible at creating.

Stick to graphics and logos. :wink: It might be worth also picking a content management system to use and learning how ti works, so that you can offer more complex functionality to clients. I wouldn’t touch ASP. Looks awful to me. (And it’s dangerous, too. Just look what it did to Cleopatra. :rofl: )

Wow, it took me 10 seconds to adjust the width in Paint. LOL.

No it’s not my image, actually I ran across a web site that looks horrible and thought I’d see if I could duplicate it’s home page but clean it up a bit. More for personal experience, who knows may send it to them and see if they will allow me to do the whole site. Completely voluntary though, I don’t think they can afford to pay to have it done. Be something to put in a portfolio later though.

I’m picking up HTML and CSS ok, it’s not too hard. But I’ve never done anything with graphics or logos. Not sure if I want to try my hand at that next or pick up ASP.NET or something.

If you just want the background image to appear once without repeating then just specify no-repeat in the CSS.

Ah, silly me, I forgot you said “background image”. (My last sentence was only relevant to an image in the HTML.) Unfortunately, unless the image can tile (that is, repeat across the page seamlessly) I think your best option is to re-do the image at the right size.

Did you make the image yourself?

EDIT: great links, Slackr. Didn’t see your post when responding.

Had a brief look at some Picasa stuff and looks like it isn’t as simple as other programs. A hack job solution can be found here

Personally I’d just go to one of the many online editors for this job if it is pretty straight forward and you’re not doing a lot.

Take your pic from here: Lifehacker Top 5 Online Image Editors

It’s actually a .jpg image that has sort of a light to medium red fade, sort of a rolling look to it. Repeating it doesn’t really work.

I know how to specify the image width in a regular image tag, but wasn’t sure if the same thing could be done for a background image.

I’d love to save up some cash and buy photoshop or some sort of graphic design software, haven’t really gotten to that point yet as I’m still learning HTML/CSS.

Thank you,

BB

I’m not familiar with Picasa, but in Photoshop you can choose to change the canvas size: Images > Canvas size.

Then you would duplicate the image to fill the new area (if if an be duplicated).

I guess the real question is: what size is the original image, and is it basically a plain color that can be repeated, or is it like a photo?

In the html (or css) you can specify the image sidth, but if the image is naturally smaller than the set width, the image will resize but could get quite fuzzy.

Thank you slackr,

I’ll look through those online editors and see what I can find.