View Full Version : Background image and resolution trouble

11-21-2009, 08:05 PM
Hello there all :)

I have a couple of issues I was wondering if someone could help me with.

First is, for my website, I have a painted image that I would like to use as the background. However, I am aware that people have different monitors etc. Is there anyway I can set my image as my background and make sure it appears the same on all monitors? I just want it so there is no need to scroll side to side or up and down.

My second problem is resolution of images. An image I want to place on one of my pages started life as a 300dpi jpeg in Photoshop. I converted it to 100dpi and put it on my website. It was too small so, I had to re size it and when resized it went all pixeled - is there anyway I can overcome this? I have tried changing resolutions and image sizes in photoshop and nothing seems to be working.

Thankyou very much anyone who can help :)

Lizzie x

d a v e
11-21-2009, 08:14 PM
you need to plan your image so it will start from top and left/centre (depending on whether your pages are leftaligned or centred) and then use a background colour as well so the image continues into that. people with smaller viewports (i.e. with smaller screens/resolutions/non-maximised browsers) will see less of the image and there's no real way around that. you could size it in percentages (i.e. 100%) but it will look bad when it is resized by the browser.

seeing your page and the image would help in giving more specific advice ;)

resolution doesn't matter on the web. size your image in pixels and don't worry about the resolution which only affects print size (don't forget to use the svae for web option) also, only reduce image dimensions, not increase them from an original or you will suffer from pixelation.

11-21-2009, 08:23 PM
I thought images online had to be a low res so they didn't take too long to load on peoples computers, that's why I have made copies at 100dpi to use just for Dreamweaver.

Hmm the image I want as my background is a black ink wash, I want my site to have a painted quality (I'm an illustrator) so I didn't want to use a block colour on my background.

Because of this, if I put my background colour as black, then my ink wash over the top, you can very clearly see where the image ends. I suppose if I have too I could ditch the ink wash and just have block black. Bit annoying but I think I'll live!


That's my site, well what there is of it and it changes every 2 seconds as I am a total new beginner and have decided trial and error is the best way for me to learn!

The image I am having trouble with is the self portrait with the speech bubble coming out of it, I can't seem to get it quite right! I have been playing around with it for about an hour and think I am making some progress! I would like that image it to sit right in the bottom right hand corner of my page and for it to be the same on all monitors.

d a v e
11-21-2009, 09:01 PM
no images just need to be the right size in pixels. just use what you have and file > save for web and export as jpeg/gif/png.

choose a solid background colour that is an approximate average of the ink wash and then where the ink wash ends use a large soft brush (in photoshop or image editor) possibly with the opacity set to 50-100% and either erase, or paint your solid background colour so you the edge of the inkwash fades into the background.

11-21-2009, 10:42 PM
Yeah I thought about editing the edges of the ink wash. I shall try that one! Set a block background just for now but I will see if I can make that idea work!

Before I read your second response I faffed about and have managed to make a 100dpi jpeg have a good quality to it so I'm just leaving that one but for future I will just use 300dpi images, much less fuss adjusting resolutions and all!

Just another question about the speech bubble image, when I place that on Dreamweaver and it looks to be in the bottom right hand corner on my screen when previewed, will that be the same on all monitors or does it move depending on the monitor?

Thankyou ever so much for your help so far! x

d a v e
11-22-2009, 05:57 AM
depends on how you place it - resize your browser and you will see what happens ;)

11-22-2009, 05:11 PM
I have another question relating to backgrounds! Didn't want to start a new thread so thought I would just add to this one :)

In photoshop, I have erased backgrounds on some of my images, yet when I place them in Dreamweaver there is a plain white background on my image that I can't seem to get rid of. So, how do I make it so when I erase a background in Photoshop it stays erased in Dreamweaver and doesn't put a white background around the image?


d a v e
11-23-2009, 12:58 PM
you need to match the background in photoshop to the destination one if you're exporting as jpeg. so if you have say a pink background in Dreamweaver then you need to use a pink background in photoshop behind your image before you start erasing. i usually do this in fireworks but if memory serves me correctly you need to

duplicate your image layer by dragging that layer on the new layer icon in the layers panel

then change the background swatch to pink (or whatever colour) then select all on the background layer and delete it and hopefully you will end up with an image on a layer above a pink background so when you switch to the image layer you will erase to pink.

d a v e
11-25-2009, 03:13 AM
you two seem to have gone off topic: there's nothing about watermarking / image protection from the OP :)

11-25-2009, 03:56 AM
wow that will teach me to not read the whole post , have i just responded to a spam bot? adjoupt69?

12-03-2009, 06:46 PM
My background image loads just partly some of the time on my index page. The background image loads completely on all the other pages in my site. I'm using the same simple .GIF 300k image for my background on all pages on my site. I have a flash element that loads with the index page and don't have any flash elements loading with any other page. Could the flash element be disrupting the loading of my background image and if so is there a way to stop this. If you don't think the flash element is causing the problem, do you have any ideas on how to fix it? Thank you, Steve