/    Sign up×
Community /Pin to ProfileBookmark

Background Image in a CSS

Hey everyone, it’s been a very long while since I joined. In fact, this might even be my very first post (I didn’t look at my profile to see if I ever posted here yet or not).

Anyways, straight to the point.

I am currently using Dreamweaver MX (not 2004, just MX). I have GoLive CS but I cannot stand it being that Dreamweaver is so much easier to understand and learn.

I created a template in Photoshop CS for my webpage that is 800×800.

I have this content box that I attached an iframe to. This content box has a background image, not just color.

I created a seperate html document that contains a news story. I have no problem displaying the news story in the iframe but the problem I have concerns the background. In the news story html document, I only did normal text formatting, not touching anything to do with the background. When the user clicks on the link to display the news story in the iframe window, instead of seeing just the formatted text, the user will see that the text sits in a white cell.

So I then attempted to learn CSS. I have managed to figure out the basic CSS coding, such as the font-size, font-weight, font-style, etc… What I have not been able to figure out is how to set a background image. I would also like for this image to be a fixed image. The current book I am using to learn from is “HTML, XHTML, and CSS Bible”. The book is working wonders on my coding but for the life of me, I cannot seem to figure out how to add the fixed background image.

Here is the code I am currently using in my external “mainpage.css” is as follows:

body { background-image: url(“contentbox_background.gif”); background-repeat: no-repeat; }

Is there anything I am doing wrong with the coding? That is exactly what I am typing into the style sheet.

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@Mr_JNov 16.2005 — Please try the following


body {

background-image: url("contentbox_background.gif");

background-repeat: no-repeat;

background-position: 50px 50px;

background-attachment:fixed;

}


The background-position values can be top, center, bottom, left, center, right depending on how you want to position the image.

background-position: center center

or a numerical value as shown above
Copy linkTweet thisAlerts:
@kaygdanimalauthorNov 17.2005 — Thank you.

Sorry for such a late reply back. I work the midnight shift at my job.

So far it isn't working though.

I have the contentbox_background.gif in the images folder. Do I need to put "imagescontentbox_background.gif" rather than just contentbox_background.gif?

What is the purpose of putting url in front?
Copy linkTweet thisAlerts:
@kaygdanimalauthorNov 17.2005 — Nevermind now. I finally figured it all out. I have it working and it looks how I was wanting it to the whole time.
×

Success!

Help @kaygdanimal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...