Opgelost Achtergrond werkt niet in CSS.

Dit topic is als opgelost gemarkeerd
Status
Niet open voor verdere reacties.

hoogteijling

Terugkerende gebruiker
Lid geworden
12 aug 2005
Berichten
4.261
Hallo,
ik heb een probleem met mijn website.
In de code die ik heb ingevoerd in de CSS, worden de blauwe bolletjes niet zichtbaar die hieronder staan.
ik snap niet dat de blauwe bolletjes niet te zien zijn.

Schermafbeelding 2023-11-13 083326.png
Zo moet het worden.


Schermafbeelding 2023-11-13 083047.png
Dit is hoe het er bij mij uitziet.

Dit is mijn code in de CSS:

Code:
body {
background-color: plum;
border: 2px solid gray;
border-radius: 16px;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html {
background: radial-
gradient(circle, skyblue,
skyblue 50%, lightcyan 50%,
skyblue);
background-size: 8px 8px;
}
 
Laatst bewerkt:
Zet het eens in de body?
 
Hallo Aar,
bedankt voor je antwoord
ik heb het nu zo gedaan maar het resultaat is hetzelfde.

CSS:
body {
background-color: plum;
border: 2px solid gray;
border-radius: 16px;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
background: radial-
gradient(circle, skyblue,
skyblue 50%, lightcyan 50%,
skyblue);
background-size: 8px 8px;
}
 
kan je de html/php/css code in codepen zetten of linkje sturen, dat gaat wat makkelijker met troubleshooten
 
Hallo damnsharp,
bedankt voor je antwoord
ik ken codepen niet ik heb de html en css in een zip gestopt
ik hoop dat je me verder kan helpen.
 

Bijlagen

  • code.zip
    2 KB · Weergaven: 2
Haal de enter eens weg na radial-.
 
Graag gedaan!
 
Tip: wijzig bij "standaard" pagina's nooit width, margin, padding en bordeer van <body> omdat je tekst dan op sommige scherm groottes buiten beeld kan vallen. Je kan dit bijv. oplossen met <div>'s in de body.

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Albino capibara</title>
<link rel="stylesheet" href="css/mijn-eerste-stylesheet.css">
</head>
<body>

<div class="topbar">
</div>

<div class="content">
<p>Jouw tekst en foto's ...</p>
</div>

<div class="bottombar">
</div>

</body>
</html>

CSS:
* {
   box-sizing: border-box;
}
html {
   height: 100%;
   font-family: sans-serif;
}
body {
   height: 100%;
   margin: 0;
   font-family: sans-serif;
   background-image: radial-gradient(circle, skyblue, skyblue 50%, lightcyan 50%, skyblue);
   background-size: 8px 8px;
}
div.topbar {
   height: 8px;
}
div.bottombar {
   height: 24px;
}
div.content {
   min-height: 100%;
   min-width: 256px;  /* of width: 100%; */
   max-width: 1024px;
   margin-right: auto;
   margin-left: auto;
   padding: 32px 16px 16px 16px;
   border: 2px solid gray;
   border-radius: 16px;
   background-color: plum;
}
h1, h2, h3 {
   margin-top: 16px;
   margin-bottom: 8pxpx;
}
h4, h5, h6, p, ul, ol {
   margin-top: 0;
   margin-bottom: 8px;
}
img {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
   border-style: none;
}
 
  • Leuk
Waarderingen: Aar
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan