Full screen background
ozcan
-
Modifié le 3 juin 2023 à 02:26
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 3 juin 2023 à 11:14
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 3 juin 2023 à 11:14
A voir également:
- Full screen background
- Blue screen - Guide
- Apowersoft screen recorder - Télécharger - Capture d'écran
- Screen samsung - Guide
- Screen windows - Guide
- Double screen pc - Guide
3 réponses
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
3 juin 2023 à 11:14
3 juin 2023 à 11:14
Bonjour,
Si tu mets une image sur le body .. elle prend tout le body ..
Si tu veux pouvoir écrire du texte en dessous... places une DIV dans laquelle tu mettras ton image .. puis une autre div dans laquelle tu mettra ton texte.
uniuc
Messages postés
196
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
29 juin 2023
8
3 juin 2023 à 04:24
3 juin 2023 à 04:24
bonjour,
Il serais possible de voir ton code ?
Oui,
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="./custom.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a href="#" class="navbar-brand"></a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto">
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item text-white nav-link">Accueil</a>
<a href="#" class="nav-item nav-link">Menu</a>
<a href="#" class="nav-item text-white nav-link">A propos</a>
<a href="#" class="nav-item text-white nav-link">Contact</a>
</div>
</div>
</div>
</nav>
</div>
<!--/end of navbar --->
<div class="content">
<h1><a href="" target="_blank">Full Screen Background Image</a></h1>
<p>Aroma wings est doppio black et fair trade seasonal breve. Cortado organic coffee, single shot, roast cappuccino mocha single origin doppio. Half and half, roast, espresso roast decaffeinated aromatic, con panna froth grounds grinder sweet. Wings fair trade extraction lungo, irish cappuccino skinny saucer wings.</p>
<p>Ut bar medium eu, medium, con panna lungo whipped cup frappuccino. Dark crema single origin, con panna cortado eu galão crema. Organic qui and whipped espresso caramelization spoon espresso aroma. To go, whipped, con panna cream galão coffee kopi-luwak.</p>
<p>Single shot, blue mountain siphon, beans acerbic chicory as wings plunger pot. Foam spoon, bar trifecta redeye, id crema latte chicory strong. Percolator at ristretto, chicory dark redeye body arabica siphon. Con panna single origin, medium rich iced, aged siphon grinder con panna sweet cappuccino.</p>
<p>Single origin steamed cultivar redeye grounds macchiato espresso. Milk, affogato, aged, dark arabica bar, sweet instant galão plunger pot half and half. Aged siphon, ut extra, percolator turkish aromatic eu affogato. Viennese robusta, breve a trifecta black, percolator whipped acerbic single origin affogato wings.</p>
<p>Dark siphon, aroma, lungo whipped dark et dark. Carajillo white shop, grounds est beans decaffeinated single origin and dark. Spoon beans extra, irish rich, mazagran aftertaste half and half bar froth mocha froth. Medium acerbic pumpkin spice, saucer foam a acerbic frappuccino medium.</p>
<p>Mug cream extra lungo qui kopi-luwak skinny. Breve doppio latte chicory crema est skinny. Caramelization barista qui, shop con panna, lungo spoon wings to go filter. Siphon chicory, roast doppio skinny cup americano foam.</p>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
CSS
body {
background: url(images/menu1.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content {
text-align: right;
font-family: 'Open Sans', sans-serif;
color: #fff;
margin: 40px auto;
width: 100%;
max-width: 960px;
border-radius: 5px;
padding-bottom: 32px;
}
h1, h1 a {
min-height: 100px;
width: 90%;
max-width: 700px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
color: #fff;
padding-top: 80px;
}
p {
width: 90%;
max-width: 700px;
text-align: left;
margin: 0 auto;
padding-bottom: 32px;
height: 50%;
}
