954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
4 Months Ago
0

Two background images

Hello everybody , I'm just asking for how to have two background images in html , the problem is that i need two different caracteristics in css . the first one is defined as :
html : 

<body>

        <img id="arriere" alt="" src="water.png" />     
        <h1>Mon super site</h1>        
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
        <p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>

    </body>

css :

html, body {
    background-color: black;
    background-attachment: fixed; 
    color: white;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}


Thank you very much for answering .

Ismatus3
Junior Poster in Training
78 posts since Dec 2011
Reputation Points: 23
Solved Threads: 2
 
4 Months Ago
0

I dont see a background image anywhere in your code. I see where you have inserted an img element.

background image would be in your CSS, not your mark up like so:

body {
	width: 100%;
	background-image: url(myImage.jpg);
	background-repeat: repeat;
}


Or you could add that same css to a div as well.

#someDiv{
	width: 100%;
	background-image: url(myImage.jpg);
	background-repeat: repeat;
}
teedoff
Posting Pro
599 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
 
4 Months Ago
0

hello , thank you for answering , but i could nt do that , when i applied what you taled me to do , i had a small image background in the top left ...

Ismatus3
Junior Poster in Training
78 posts since Dec 2011
Reputation Points: 23
Solved Threads: 2
 
4 Months Ago
0

You need to explain in more detail what you're trying to do then. A link to your site would be very heldful, since we're dealing with images and I dont have yours here to recreate the code with.

teedoff
Posting Pro
599 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
 
4 Months Ago
0

I see , thank you again for answering , i did a link to try the code and run it :
http://jsfiddle.net/aAuGc/5/ .
I explain to you : now , i did rmove the first image in the top , and just need to have this image "sunlight.jpg" in the middle of the page as fixed background , with marging in right and left , here in this link with that codes there is marging only in the left side ..

Ismatus3
Junior Poster in Training
78 posts since Dec 2011
Reputation Points: 23
Solved Threads: 2
 
4 Months Ago
0

My suggestion: remove the margin-left and just simply put margin:auto. It will work fine even back in IE7 provide you declared the DOCTYPE.

lps
Junior Poster
117 posts since Jul 2011
Reputation Points: 13
Solved Threads: 22
 
4 Months Ago
0

Hello , but i could finaly insert many images in my page using many divs , i show parts of my code : html , and css , with links to the photos :

html : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>

        <div id="arrieregradient_bg"><img src="http://www.csszengarden.com/210/gradient_bg.jpg" alt="">

        </div>

        <div id="arrierewater"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater1"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater2"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>

        <div id="arrierewater3"><img src="http://www.csszengarden.com/210/water_edge.jpg" alt="">

        </div>
        

        <div id="arriereclouds"><img src="http://www.csszengarden.com/210/clouds.jpg" alt="">

        </div>
        

        <div id="arriereclouds1"><img src="http://www.csszengarden.com/210/clouds.jpg" alt="">

        </div>

        


        <div id="arrieresun"><img src="http://www.csszengarden.com/210/sunlight.jpg" alt="">

        </div>
        
        <div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">
        <h1>Mon site</h1>  
        <div style="position:absolute;left:400px;top:250px;width:100%;height:100%;">      
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
        <p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>


        </div>


        
        <form style="position:absolute;left:200px;top:400px;width:50%;height:100%;" id="" action="" method="post">
          <fieldset id="name">
        <legend>Informations</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label style="margin-left: 0.95em;">Nom
          <input size="10" name="Nom" />
        </label>
        <label style="margin-left: 5em;">Prénom
          <input size="10" name="Prenom" />
        </label>
        <label style="margin-left: 2em;">Fonction
          <input size="10" name="Fonction" />
        </label>
        <label>Date de la demande
          <input size="10" name="Datedemande" />
        </label>
        <label style="margin-left: 2.4em;">Département
          <input size="10" name="Departement"  />
        </label>

        
      </fieldset>








      <fieldset id="address">
        <legend>Ressources</legend>
        

        


        <table  border="1" cellpadding="2" cellspacing="2">

        <tbody>
          <tr>
           <td style="vertical-align: top; width: 179px; height: 41px;">
            </td>
            <td style="vertical-align: top; width: 155px; height: 41px;">
            </td>
            <td style="vertical-align: top; width: 203px; height: 41px;">
            </td>
            <td style="vertical-align: top; width: 258px; height: 41px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="DU" type="checkbox">Domaine Ubuntu
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="DU">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="DW" type="checkbox">Domaine Windows
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="DW">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
           <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="OE" type="checkbox">OpenERP
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="OE">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="SP" type="checkbox">Système Pointage
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="SP">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
           </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="VPN" type="checkbox">VPN MonteBlanco
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="VPN">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="Em" type="checkbox">E-Mail
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="Email">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="WWW" type="checkbox">WWW
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="WWW">
            </td>
            <td style="vertical-align: top; width: 203px;">
            </td>
            <td style="vertical-align: top; width: 258px;">
            </td>
          </tr>
        </tbody>
      </table>

      </fieldset>



      <fieldset id="name">
        <legend>Informations</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label style="margin-left: 0.95em;">Nom
          <input size="10" name="Nom" />
        </label>
        <label style="margin-left: 5em;">Prénom
          <input size="10" name="Prenom" />
        </label>
        <label style="margin-left: 2em;">Fonction
          <input size="10" name="Fonction" />
        </label>
        <label>Date de la demande
          <input size="10" name="Datedemande" />
        </label>
        <label style="margin-left: 2.4em;">Département
          <input size="10" name="Departement"  />
        </label>
       
        
      </fieldset>



      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        
        <input class="submit" type="submit" value="Submit" />
        
      </fieldset>
      
      
        </form>



         Contenu de la page ici

        </div>   
        

    </body>
</html>


Css :

html, body {
    overflow-x: hidden;
}
@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}

h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
    font-family: 'LearningCurveProRegular';
    text-align: center;

    font-size: 40px; /* Titres de 40 pixels */
    color: blue;
}


.salutations
{
    color: blue;
}
html, body {

    
    background-color: white;

    
    
    color: grey;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
/* l'image occupe toute la place du body */
#arriere {
    
    width : 100%;
    height: 100%;
    position:absolute;
    left:0px;
    top:0px;
    
}

#arrieresun {
    
    position:absolute;
    left:0px;
    top:0;
    right:0px;
    bottom:200px;
}



#arriereclouds {
    
    position:absolute;
    left:0px;
    top:0;
    right:400px;
    bottom:200px;
}

#arriereclouds1 {
    
    position:absolute;
    left:928px;
    top:0;
    right:400px;
    bottom:200px;

}




#arrieregradient_bg {
    
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:-1000px;
}
#arrierewater {
    
    position:absolute;
    left:0px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater1 {
    
    position:absolute;
    left:399px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater2 {
    
    position:absolute;
    left:798px;
    top:104px;
    right:0px;
    bottom:0px;
}

#arrierewater3 {
    
    position:absolute;
    left:1197px;
    top:104px;
    right:0px;
    bottom:0px;
}


#arrieregradient_bg > img {
    width: 100%;
    height: 100%;
}







p
{   
    font-family: 'LearningCurveProRegular';
    font-size: 30px; /* Paragraphes de 14 pixels */
}
Ismatus3
Junior Poster in Training
78 posts since Dec 2011
Reputation Points: 23
Solved Threads: 2
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed