Trouble with my background image

ronaldroe

Super Moderator
Staff member
Ok, here's how we fix this.

Take flattenedimage2.jpg and fill in the white area with the background color from the rest of the image. Set that as the background image for the body. Then, put everything else on top of that. Create one large content div with the background color set to white. Make update.jpg the background image for that div with no-repeat. Send background.jpg to the recycle bin.

If I may, I'd like to make a few other recommendations.

Placing your CSS in a separate file allows these changes to be made much more easily. In fact, having almost all of your CSS as inline styles defeats the purpose of CSS altogether.

As far as fonts: using fonts like the Adobe Caslon Pro for your text will cause issues for any user who doesn't have it, which will be anyone who doesn't have any Adobe Creative Suite products installed. If you're going to rely on local fonts, it's better to stick to ones that nearly everyone has, like Arial or Courier New. Alternatively, you could use @font-face declarations to import your own fonts. Check out Fontsquirrel.com for resources you can use for free.
 
Last edited:

Phreaddee

Super Moderator
Staff member
put your pagecontents in a wrapper

<body>
<div id="wrapper">

...
...
</div>
</body>

put your image (the one on the left) as the body BG.
set the wrapper to background-color:#fff; margin:0 auto; and the width of your pagecontents
dont use the repeating "big white box" background as you currently do.

dont use position:absolute; unless it needs to be taken out of the document flow. there are more flexible ways of writing than that.

and yes dont use abode caslon font. like ronald said, only those with it installed can see it.
 

alliewar

New Member
Thanks ronaldroe and phreaddee, but, thats just complicated... maybe I'll pay to get this done later on. I did try to fix the background some other way, its not exact but its not as noticeable as before either, thanks for the font tips as well.
 

PixelPusher

Super Moderator
Staff member
I'm a beginner in forming a website. I'm just using simple html to get by. I have a problem with my picture lining up with my background. You will see what I mean when you scroll down. Can someone just 'view sources' and just check what I did.. ?

Thanks!

http://jaywarastrology.webs.com/index.html

Are you referring to teh one pixel shift between the white space (content area) and the purple/grey background?
 
Top