Member Avatar for Ismatus3

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 .

  • 3 Contributors
  • 6 Replies
  • 135 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Ismatus3
Member Avatar for teedoff

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;
}
Member Avatar for Ismatus3

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

Member Avatar for teedoff

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.

Member Avatar for Ismatus3

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

Edited by Ismatus3 because: n/a
Member Avatar for lps

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.

Member Avatar for Ismatus3

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><br>
        <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>

        <br />
      </fieldset>








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

        <br />


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

        <tbody>
          <tr>
           <td style="vertical-align: top; width: 179px; height: 41px;"><br>
            </td>
            <td style="vertical-align: top; width: 155px; height: 41px;"><br>
            </td>
            <td style="vertical-align: top; width: 203px; height: 41px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px; height: 41px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="DU" type="checkbox">Domaine Ubuntu<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="DU"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="DW" type="checkbox">Domaine Windows<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="DW"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
           <td style="vertical-align: top; width: 258px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="OE" type="checkbox">OpenERP<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="OE"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="SP" type="checkbox">Système Pointage<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="SP"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
           </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="VPN" type="checkbox">VPN MonteBlanco<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="VPN"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="Em" type="checkbox">E-Mail<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="Email"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 179px;"><input name="WWW" type="checkbox">WWW<br>
            </td>
            <td style="vertical-align: top; width: 155px;"><input style="margin-left: 2em;" size="10" name="WWW"><br>
            </td>
            <td style="vertical-align: top; width: 203px;"><br>
            </td>
            <td style="vertical-align: top; width: 258px;"><br>
            </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><br>
        <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>
       
        <br />
      </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>
            <br />
          </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>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </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 */
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.