Bootstrap

Status
Niet open voor verdere reacties.
joanne

joanne

Terugkerende gebruiker
Lid geworden
31 mrt 2001
Berichten
1.300
HTML: 
<div class="jumbotron text-center" style= "background:green;color:white;">
  <h1>bla bla bla werkt dus. </h1>
  <p>nogmaals  bla bla bla <p> 
</div>

Bovenstaande werkt. Maar nu wil ik een plaatje JPG en staat in directory/map i.p.v. de backgroud green, als achtergrond?
Hoe krijg ik dit voor elkaar??

Groene achtergrond is zo saai/gewoontjes :confused:
Alvast dank.:thumb:
 
Een id heeft een hogere prioriteit dan een class.
Met een id kan je dus makkelijker Bootstrap aanpassen.
Code: 
<div id="jumbo1" class="jumbotron text-center">
  <h1>bla bla bla werkt dus.</h1>
  <p>nogmaals bla bla bla.<p>
</div>

<style>
#jumbo1 {
  background-color: green;
  background-image: url('map/submap/foto.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* achtergrond op gehele jumbotron */
  color: white;
}
</style>

Suc6. Have fun.
 
JPG in header

OK HH, ik ga met jullie tips aan de slag. W3schools ken ik, en daar menig uurtje doorgebracht om meer te weten over Bootstrap andere zaken ook wel.
Moet wel wennen aan de kreten die daar gebruikt worden. Maar goed alles went..

Ook andere sites die ik ook de moeite waard vind.
deze bijv.

Thx :D: :thumb:
 
Laatst bewerkt:
blabla.jp of JPG

<style>
#jumbo1 {
background-color: green;
background-image: url('map/submap/foto.jpg');
background-repeat: no-repeat;
background-size: cover; /* achtergrond op gehele jumbotron */
color: white;
}
</style>

Bovenstaande snap ik. Imge heb ikgewoon in een map staan gewoon op mijn harde schijf. Dus niet op het www.
Toch gaat er iets nietgoed. Watweetik niet. :rolleyes: Gewoon geen image.
 
'map/submap/foto.jpg' betekent dat je op de webserver een map met de naam "map" moet hebben en daarin een map met de mapnaam "submap" en daarin een afbeelding met de naam "foto.jpg". Het pad naar deze foto is relatief, dat betekent dat het pad map/submap/ wordt gezien vanaf het html bestand waarin deze <style> staat.

Logisch mag je de namen map, submap foto.jpg veranderen in de namen die jij gebruikt.
Stel dat de foto "bg-jumbo1.jpg" heet en je plaatst deze in images/jumbos/ op de webserver,
dan wordt het: background-image: url('images/jumbos/bg-jumbo1.jpg');
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan