1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Really need help with this - background problem

Discussion in 'Web Design' started by keysikg, Feb 23, 2013.

  1. keysikg

    keysikg Regular Member

    Joined:
    May 16, 2012
    Messages:
    445
    Likes Received:
    224
    I really need help with this.

    This is my page: http://i.imgur.com/uV5YWv2.png

    Livestream with some default background color. I want to make a image to be background but then background image goes all over page and I can't see stream image.

    I tried changing z-index but that doesn't help cause loading.gif (stream image) and other images doesn't have one, at least that is what I think. This is my try to get things done(highlighted code is background image that fits screen). However it overlays other images. I need code to make background to be under them.

    [​IMG]

    Thank you very much in advance, I am gonna kill myself, trying to figure out this for 4 hours.
     
  2. Amsterdammer

    Amsterdammer Power Member

    Joined:
    Aug 9, 2011
    Messages:
    515
    Likes Received:
    563
    Is it just me or would it be easier to just CSS the thing?
    I mean, you have the setup practically there?

    If you add this line it should be sorted. Need a CSS stylesheet for that tho and to include the stylesheet to your HTML code.
    #mainWrapper {background-color=#colorcode;}
    Where "colorcode" is the HTML color code of course. Use a dot for classes.

    Either that, or I am more of a newb than I think I am. lol

    EDIT: Perhaps today is not my day. lol
    You are using style but inline. It is not the recommended option for creating whole pages.
    Your problem is that you created another div when you shouldn't have. :p
    http://www.w3schools.com/css/css_howto.asp

    If you take the bit from "<div style= ... " and delete the div thing but add the rest of it to the div you want to use, it should work. :) In this case your mainWrapper.
    Like so:
    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
    I stole that, saves typing. :p
     
    Last edited: Feb 24, 2013
  3. keysikg

    keysikg Regular Member

    Joined:
    May 16, 2012
    Messages:
    445
    Likes Received:
    224

    Thanks for that answer, but that is too complicated for me. Hehe, seems that I know much less than I thought :)

    Could you write me that line of code and tell me what to replace because I really didn't understand what you said. Thanks again really, and sorry for bothering you.
     
  4. Amsterdammer

    Amsterdammer Power Member

    Joined:
    Aug 9, 2011
    Messages:
    515
    Likes Received:
    563
    You are not bothering me. lolz
    You are learning. :)

    Let me rephrase my answer:

    Right now you are doing all style changes on your HTML page. This makes it clutty and is not the recommended way. You should only use this method for a specific element in your page. It will come to bite you if you don't.

    If you read this link, it will tell you about styles and how to include a CSS stylesheet to your page. Works differently in WP btw.
    http://www.w3schools.com/css/css_howto.asp
    But, you want to style your background, with a picture and not a color (bad reading Amsterdammer).
    http://www.w3schools.com/css/css_background.asp

    The problem you encountered was you first declared a div called "bg", then try to create another div called "style" and expect it to influence the previous div. This will not work.
    Retyping your code is more than I want to do at this point but it should also not be needed. If it is, post that part of the code here or give it in PM. Be sure to exclude anything leading towards your site, it is not needed to solve this problem. :)
    But: <div id="wrapmesilly" style="stuff to style;morestyling : other styling stuff;">Text or whatever to be effected by styling</div> should work.

    Now, if this doesn't work, install FireBug and select "inspect element" to find the div you want to alter. Installing FireBug is something you will do eventually so why not now. :p lolz

    Hope this makes more sense to you. :)


    EDIT: Had to make an emoticon disappear in the code for styling. Also edited to be more clear on the div styled.
     
    Last edited: Feb 24, 2013
  5. Amsterdammer

    Amsterdammer Power Member

    Joined:
    Aug 9, 2011
    Messages:
    515
    Likes Received:
    563
    Enough editing. Let me just post it separately.

    If you use ID, it doesn't give you as many options as with class.
    In your wrapper for instance, p.mainWrapper would effect ALL p elements in that div. Makes for quicker changes. :)
    Just putting .p in your CSS stylesheet would effect all p elements throughout your page for instance.
    I prefer classes to things I like to style instead of ID.
    http://www.w3schools.com/css/css_id_class.asp
     
  6. keysikg

    keysikg Regular Member

    Joined:
    May 16, 2012
    Messages:
    445
    Likes Received:
    224
    I have sent you a PM.