- This topic is empty.
-
AuthorPosts
-
July 28, 2010 at 8:23 pm #29778TheN00bParticipant
Hello Guys
I’m working on a site ( as some of you already know) and I’m getting stuck every now and then. I would greatly appreciate some help in dealing with difficulties as they appear.
Here are the issues currently bugging me:
1) the Background image doesn’t show for the body tag !
2) What’s the best way to position the frog ? the current method looks different for each of the browsers !
Thank You.
July 28, 2010 at 10:09 pm #80619virtualParticipant1 – Try putting a comma between html and body where you have the background image.
2 – More importantly, where do you want it to appear? In any case it should be behind the text. Did you layout your site before you started coding it?
July 28, 2010 at 10:15 pm #80620TheN00bParticipantHi Virtual
For number 1, I have added a comma but now the whole background is white (on local machine) .. though I don’t know if this has something to do with the small resolution of my 10" screen (Samsung NC10)
For 2, Yes I have laid out the site in photoshop first. The frog should be near the centre and have its fingers above the white content box.
Thanks
July 28, 2010 at 10:33 pm #80624TheDocMember#1 – Where is the image located? I have a feeling it should be: url(../images/bg_img.jpg)
July 29, 2010 at 1:28 pm #80655virtualParticipantSorry, I meant if you are declaring html and body you need to put a comma in between. In your case I don’t think you need to declare the html tag, just use the body tag and put your background image on it. The Doc is right if your image is in a folder called images and you are calling it from the css file which is in a folder called css then you need to change the code to url(../images/bg_img.jpg)
For the frog, you are positioning absolute and it is showing relative to the body not relative to the containing div. You need to add position: relative; to the containing div. See this article which explains it visually:
https://css-tricks.com/absolute-position … sitioning/July 29, 2010 at 6:27 pm #80674TheN00bParticipantThank You The Doc and Virtual.
Even though I have edited the url to the background image .. it is still not showing !
Thanks for the link Virtual, will get to that once I sort out the background issue.
Thank You.
July 29, 2010 at 6:52 pm #80676virtualParticipantThe background problem is because in the reset.css you have a value set for background. If you remove that your background appears, but then we have another problem which you will see immediately. I don’t have time to look at it now, but will see if I can figure it out later.
July 29, 2010 at 7:02 pm #80678virtualParticipantFound it, you need to add no-repeat. When you rewrite your background code, write it like this
Code:background: #163146 url(../images/bg_img.jpg) no-repeat;Don’t forget to leave a space between the closing bracket after .jpg and the no-repeat or you will have problems with IE displaying it.
July 29, 2010 at 7:45 pm #80679TheN00bParticipantI don’t know what I have done, but the whole thing is a mess now ! lol at least the background image is finally showing.
What I did was remove the { body } from the [ reset.css ] and Copy / Pasted the attribute to the { body } in the [ styles.css ] file.
What’s causing the mess ?
Thanks
July 29, 2010 at 8:17 pm #80680virtualParticipantI think you have too many bodies LOL and too many style sheets which are overriding each other. I’ll take a look and get back to you.
July 29, 2010 at 8:28 pm #80681virtualParticipantPut the body tag back in the reset.css, it is there for a reason, and just remove the line with the background code from the reset.css. Then add the code for the background I gave you previously in the styles.css, but add it to the body tag not the #container.
Let me knowJuly 31, 2010 at 9:50 am #80776TheN00bParticipantThanks Virtual. That worked .. Kind of !!
I want the background image around the content box ! How do I get it to be like that ?
Thank You.
July 31, 2010 at 12:45 pm #80778virtualParticipantI think you need to remove the white from your background image and just leave the glow. You already have a white background for your content. Try that first.
July 31, 2010 at 3:03 pm #80780TheN00bParticipantHi Virtual I know what you mean, but the issue isn’t in the white in the background image.
The issue is in the position of the background image. Because that pale yellow bit is suppose to go behind the frog.
Thanks
July 31, 2010 at 5:06 pm #80786virtualParticipantI think we are getting ourselves confused here and I’m not quite getting what you wanted.
I think you need to rework the way you have cut up the photoshop psd. I would do it like so:
Cut a sliver from the side of the background, say 5px wide by 50px high, enough to go beyond the black topbar then apply that to the body tag with the background color then the small image to repeat x.
Cut the part that you want as the container with the black topbar and glow and put that on the container tag with a width and margin: 0 auto; this will sit over the body background image. Remove the white part. That will be the background for the content tag.
Your html should then look like this:
Code:<body>
<div id="container">
<div id="header">
<ul id="navigation">bla bla bla</ul>
<div id="logo">
<img src="images/logo.png" alt="Logo, Text, Zanist Wist" />
</div>
<div id="frog">
<img src="images/frog.png" alt="The Zanist Wist Friendly Frog" />
</div>
</div>
<div id="content">etc etc etc
</div></div><!–Close container–>
</body>Give the content a bg color of white.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.