Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS XHTML CSS Static Site Help

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #29778
    TheN00b
    Participant

    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.

    #80619
    virtual
    Participant

    1 – 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?

    #80620
    TheN00b
    Participant

    Hi 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

    #80624
    TheDoc
    Member

    #1 – Where is the image located? I have a feeling it should be: url(../images/bg_img.jpg)

    #80655
    virtual
    Participant

    Sorry, 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/

    #80674
    TheN00b
    Participant

    Thank You The Doc and Virtual.

    Even though I have edited the url to the background image .. it is still not showing ! :cry:

    Thanks for the link Virtual, will get to that once I sort out the background issue.

    Thank You.

    #80676
    virtual
    Participant

    The 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.

    #80678
    virtual
    Participant

    Found 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.

    #80679
    TheN00b
    Participant

    I 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

    #80680
    virtual
    Participant

    I think you have too many bodies LOL :D and too many style sheets which are overriding each other. I’ll take a look and get back to you.

    #80681
    virtual
    Participant

    Put 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 know 8-)

    #80776
    TheN00b
    Participant

    Thanks 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.

    #80778
    virtual
    Participant

    I 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.

    #80780
    TheN00b
    Participant

    Hi 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

    #80786
    virtual
    Participant

    I 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.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.