www.webdeveloper.com
Results 1 to 6 of 6

Thread: how can I make divs have different backgroundimages with the same div name?

  1. #1
    Join Date
    Mar 2012
    Posts
    1

    how can I make divs have different backgroundimages with the same div name?

    Just like this website....
    anyone can help>?
    any help is great appreciated...
    ???.jpg

  2. #2
    Join Date
    Mar 2012
    Posts
    20
    You could try having the same div name and applying an id to a paragraph within it - that website looks like a series of divs or a tabular format.
    So you could have:

    Code:
    <div id="anyname">
    	<p id="color1">content goes here</p>
    	<p id="color2">content goes here</p>
    	<p id="color1">content goes here</p>
    	<p id="color2">content goes here</p>
    </div>
    then for the css:
    Code:
    #color1 {
    	background-color:#000;
    	color:#fff;
    }
       
    #color2 {
    	background-color:#fff;
    	color:#000;
    }
    This would basically give you a black background with white writing, then a white background with black writing.

    You might need to specify the height and width etc. of each paragraph to get what you are after.

    Hope that helps :0)
    Last edited by emtw; 03-13-2012 at 07:45 AM.

  3. #3
    Join Date
    Mar 2012
    Posts
    20
    Or, you could specify ids and classes like this, for more individual styling:
    Code:
    <div id="any name">
        <p id="color1" class="row1">content goes here</p>
        <p id="color2" class="row2">content goes here</p>
        <p id="color1" class="row3">content goes here</p>
        <p id="color2" class="row4">content goes here</p>
    And the CSS would look like this:

    Code:
    #color1 {
        background-color:#000;
        color:#fff;
    }
    #color2 {
        background-color:#000;
        color:#fff;
    }
    .row1 {
       //more styling goes here
    }
    etc...

  4. #4
    Join Date
    Mar 2012
    Posts
    1,814
    Why on Earth would you want different background images in the same div? Anyway, the example you have given dos not have images in the background. They are just alternating background colors. It also looks like it is generated from a database via PHP or some such. Is that what you really need? What are you trying to achieve? It's not clear to me.
    Last edited by jedaisoul; 03-13-2012 at 10:17 AM.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Use CSS 3 which allows multiple backgrounds.

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    multiple class

    Remember you can apply multiple space-separated classes to an element. So you could have one class for the basic <div> structure and another for the background color (or image).

    <p class="soso color1">your text1</p>
    <p class="soso color2">your text2</p>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles