Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2004
    Location
    Sydney
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS + 2 backgrounds

    hi. want to make a web page with 2 backgrounds running horizontally. one at the top (#banner)coming down to 150px and then another background for the rest of the page...

    this isnt working for me... any ideas???

    so far i have...
    Code:
    #banner {
    	background-image: url(images/bkg2.gif);
    	height:150px;
    }
    
    #bkg {
    	background-image: url(images/bkg1.gif);
    }
    doing this step by step the #banner works fine. but when i add the #bkg nothing seems to happen...

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It sounds easy but for some reason I'm having trouble understanding what you need. Can you post a screenshot or a link?

    P.S. Also, make sure both block elements have some content, otherwise you won't see an image (background images don't take up space).

  • #3
    New Coder
    Join Date
    Oct 2004
    Location
    Sydney
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay here's a screenshot...
    Attached Thumbnails Attached Thumbnails CSS + 2 backgrounds-mda1.jpg  

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It'd be really easy to do this if you can tile the entire image horizontally...

    Anyhow, I forgot to ask for the code, too... we need to see where those ids are assigned...

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One element, one background image

    A single element can only hold ONE background image; if you want to assign two background images, you'll need TWO elements. If these need to occupy the same area, one has to be enveloping the other like a wrapper; the parent element (the "wrapper") background will be behind the child element background.

    In your case (guessing from the style rules provided), it look like the "banner" element could either be a child of a parent "bkg" element (the body?), or sit on top the rest of the page; a look at the actual page markup would be useful, though.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    New Coder
    Join Date
    Oct 2004
    Location
    Sydney
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay ronald,
    i understood nothing about the parents or children thing. onyl saw references to those about a week ago....

    Since then i have been able to get the 2 backgrounds working. but theres a hitch. i added a height to the #bkg of 100%. and what it seems to have done is starting counting from the bottom of #banner (150px down) and therefore puts a scrollbar on the window - which is not what i want as i'll be using an Overflow:auto in my content section.

    Can you possiblly explain the parent thing. Is this a pseudo class???

    heres the markup and css
    Code:
    <html>
    <head>
    <link href="CSS_bkg.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="banner"></div>
    <div id="bkg"></div>
    
    </body>
    </html>
    
    
    
    ********CSS***********
    
    #banner {
    	background-image: url(images/bkg2.gif);
    	height:150px;
    	}
    
    #banner2 {
    	background-image: url(images/bkg2.gif);
    	clip: rect (150px 500px 0px 10px);
    	}
    
    #bkg {
    	background-image: url(images/bkg1.gif);
    	height:100%;
    	background-attachment: fixed;
    	}

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I was about to type something that would solve this, but I realized that would only make the problem worse... here's why.

    You know what you want your page to look like when it's done, right? But you also want your webpage to have some sort of meaning and structure, otherwise you might as well just put a .jpg up there and call it a day. Right now your structure is this:

    -a division of the page that's a banner
    -a division of the page that's a background

    When I'm assuming it should be more like this (based on the screenshot):

    -a title
    -a main header
    -navigation
    -heading one
    -content
    -a copyright notice

    The thing is, the entire point of the movement to HTML and CSS is to have a method to style your page independently of its semantic structure. In other words, you can separate style from content. You can style your paragraphs, your headings, your lists, the <body>, the <html>, the <title> even (well, only in the newest of the new browsers).

    Until you actually HAVE content, you don't have much to work with as far as style. Code your page for content, then style as needed.

  • #8
    New Coder
    Join Date
    Oct 2004
    Location
    Sydney
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    An excellent point. always good to have someone around to remind us about all that form over function business...
    i tend to design a the websites appearance and then go from there....which is probalby why i keep painting myself into corners....

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, I'm a sucker for style over content myself But I think it's better to go nuts with the style in Photoshop (or Fireworks, anyone?) then put it aside and focus on content, THEN put the two together...

    My two cents...

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Separation... or not...?

    I know we all are going on about separating presentation from content, and to the extent that we use CSS for presentation and (X)HTML for structure and content, this is true; however, when it comes to laying out a page, and to some extent styling it, there are intimate ties between the structure and content of a document and its presentation.

    Since I'm a coder, I tend to start with the nuts-n-bolts and usually try to pour some presentation over it lateron. Although I expect the "right" approach is different for every person, I guess a parallel approach would work well: start with both a rough idea about a page's main structure, and a rough sketch of the desired layout; then, work towards more detailed levels, keeping one eye on the design while expending the structure, and keeping one eye on the structure while working out the design.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    See? This is why you're the advisor. Good point...

    Here's a pretty good read concerning the "blueprint" stages... it may not work for everyone but it's pretty interesting nonetheless:

    http://www.stuffandnonsense.co.uk/ar...up_guides.html

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Blueprint stages

    This is why you're the advisor
    Heh...

    Great article by the way, there, Richard; I got to put that one on my "daily blog reading" list...
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •