Achtergrond responsive maken

yourdjeric · 12 nov 2020

Goede dag allemaal

Ik heb een oude hobby is opgepakt uit 2013 en ben al aardig wat verder gekomen met een template in notepad++ te bouwen.
Het volgende loop ik tegen aan:

Ik wil een achtergrond hebben in mijn context waar later allemaal verschillende gifjes of hoverende plaatjes komen met linkjes.
Echter dient de achtergrond wel mooi te worden weer gegeven welke dit nu niet doet.

Op kleine schermen is het plaatje half zichtbaar, op mobiel bijna helemaal niet zichtbaar en op een groot scherm ook niet al te best...
Het plaatje moet responsive werken, dit lijkt deels goed te gaan.

iemand een idee hoe dit goed te krijgen op grote resoluties, standaard resoluties en mobiel resolutie...?

mijn website

mijn html:

PHP:

<!DOCTYPE html>

<html lang="nl">

<head>
<meta charset="utf-8">
<title>Skihutinfo - home</title>
<meta name="keywords" content="Skihut, Apresski, Anton, Heidi, Informatie">
<meta name="description" content="Skihutinfo is een website dat over de skihut gaat. Je vind hier genoeg informatie van muziek tot de artiesten zelf en waar je een feest vind in jou buurt.">
<link rel="stylesheet" href="basis.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<script src="overig/respond.min.js" type="text/javascript"></script>
<script src="overig/menuknop.js" type="text/javascript"></script>

</head>
 
<body>

<div id="websitevak">

<div id="balkboven">
<img src="afbeeldingen/logo.png" alt="logo" style="width: 350px; max-width: 50%; height: auto; border: 0px;" class="gecentreerd">
</div>
<!-- einde balkboven -->

<div id="middenstuk">

<div id="menu">
<a href="#" onclick=toggle(hoofdmenu); id="menuknop"><span id="menu-icoon"><span></span><span></span><span></span></span>Menu</a>
<ul id="hoofdmenu">
<li><a href="index.php">home</a></li>
<li class="submenu"><a onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Informatie</SPAN></a>
<ul>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Skihutinfo</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Skihut van Nederland</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Skihut in het buitenland</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apreski drankjes</SPAN></a></li>
</ul>
</li>
<li class="submenu"><a onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Agenda</SPAN></a>
<ul>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Evenementen</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Skihut on toer</SPAN></a></li>
</ul>
<li class="submenu"><a onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Muziek</SPAN></a>
<ul>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apresski artiesten</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apresski dj's</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apreski cd's</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apresski muziek</SPAN></a></li>
</ul>
</li>
<li class="submenu"><a onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Feestje</SPAN></a>
<ul>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Drive in show</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Eigen skihut feest</SPAN></a></li>
<li><a href="index.php" onClick="return true" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Apresski sponsors</SPAN></a></li>
</ul>
</li>
<li><a href="index.php" STYLE="text-decoration: line-through"><SPAN STYLE="color: blue;">Downloads</SPAN></a>
</li>
<li><a href="forum.php">Skihut forum</SPAN></a>
</li>
<li><a href="javascript:void(0);" onclick="javascript:window.open('https://www.tboek.nl/gastenboek/skihutinfo','Gastenboek','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=850,height=800,left='+(screen.width/2-600/2)+',top='+(screen.height/2-800/2)+'');">Gastenboek</a></li>
</li>
<li><a href="javascript:void(0);" onclick="javascript:window.open('formulier.php', 'contactformulier', 
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,widthformulier.php=480,height=300,left='+(screen.width/2-480/2)+',top='+(screen.height/2-300/2)+'');">Contact</a></li>
</li>
</ul>
</div>
<!-- einde menu -->

<div id="hoofdvak">

<div id="tekstvak">

</div>
<!-- einde tekstvak -->

</div>
<!-- einde hoofdvak -->

</div>
<!-- einde middenstuk -->

<div id="balkbeneden">

<div id="inhoudbalkbeneden">
<span>&copy; <script type = "text/javascript">
now = new Date
theYear=now.getFullYear()
document.write(theYear)
</script> Skihutinfo</span>
<span><a href="vacatures.php">Vacatures</a></span>
<span><a href="linken.php">links</a></span>
<span><a href="https://www.soundradio.nl">Sound radio</a></span>

<p>powered by Sound radio license: SW15N.0048 / sena: nr.SW966.15</p>

<!-- Begin JouwStats code-->
<script src="https://www.jouwstats.nl/count.js"></script>
<script type = "text/javascript">
//<![CDATA[
count(40674);
//]]>
</script>
<!-- Einde JouwStats code-->

</div>


</div>
<!-- einde balkbeneden -->

</div>
<!-- einde websitevak -->



</body>

</html>

Code:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    background-image: url(../afbeeldingen/wood.jpg);
    color: black;
    font-family: arial,helvetica,sans-serif;
    font-size: 1em;
}

#websitevak {
width: 100%;
max-width: 98%; /* Hiermee Wordt de website vak tussen de groene lijnen smaller of breder */
margin: 1em auto;
border-left: 3px ridge green;
border-right: 3px ridge green;
}

@media screen and (max-width: 800px) {
#websitevak {
    width: 95%;
}
}

@media screen and (min-width: 1440px) {
#websitevak {
    width: 98%;
}
}

#balkboven {
    width: 100%;
	height: auto;
    padding: 0.0em 0;
    background-color: green;
    background-image: url(afbeeldingen/banner.png);
    background-repeat: no-repeat;	
	background-size: 100% 100%;
}

@media screen and (max-width: 800px) {
#balkboven {
    padding: 3em 0;
}
}

#balkboven p {
    color: #005aff;
    font-family: georgia,serif;
    font-size: 6em;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

@media screen and (max-width: 800px) {
#balkboven p {
    font-size: 2em;
}
}

#balkboven p {
    text-decoration: none;
}

#middenstuk {
    background-color: #3A0A0A;
	position: relative;
    width: 100%;
	z-index: 1;
}

@media screen and (max-width: 800px) {
#middenstuk {
    background-color: transparent;
}
}

#middenstuk:before {
    background-color: white;
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80%;
	z-index: -1;
}

@media screen and (max-width: 800px) {
#middenstuk:before {
	display: none;
}
}

#middenstuk:after {
    clear: both;
    content: " ";
    display: table;
}

#menu {
    border-top: 1px solid white;
    float: left;
	position: relative;
    width: 17%;
}

@media screen and (max-width: 800px) {
#menu {
    float: none;
    width: 100%;
}
}

#menuknop {
    background-color: green; /* verander achtergrond kleur van de knop menu op mobiele weergave */
    border-bottom: 1px solid white;
    color: white;
    height: 20px;
    display: none;
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 9px 0.2em 9px 0.9em;
    text-align: center;
    text-decoration: none;
}

@media screen and (max-width: 800px) {
#menuknop {
    display: block;
}
}

#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.5em 0 0;
    position: relative;
}
 
#menu-icoon span {
    background-color: white;
    border: .5px solid white;
    height: 2px;
    margin-top: 3px;
    width: 100%;
    display: block;
}

#menu ul {
    list-style-type: none;
}

#hoofdmenu {
    display: none;
}

@media screen and (min-width: 801px) {
#hoofdmenu {
    display: block !important;
}
}

#hoofdmenu > li {
    float: none;
    position: relative;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li {
    float: none;
}
}

#hoofdmenu > li > a {
    border-bottom: 1px solid white;
    color: gold;
    display: block;
    font-size: 1em;
    font-weight: bold;
    padding: 1em 1.5em 1em 0.5em;
    text-align: left;
    text-decoration: none;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li > a {
    background-color: #2A0A0A; /* verander achtergrond kleur van het menu op mobiele weergave*/
    border-bottom: 1px solid white;
    display: block;
	font-weight: normal;
	padding: 0.6em 0.8em;
}
}

#hoofdmenu > li > a:hover {
    background-color: darkred; /* verander achtergrond kleur van het menu */
}

#hoofdmenu > li:hover ul {
    display: block;
    position: absolute;
    top: -1px;
    left: 100%;
    z-index: 2;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
    position: absolute;
    top: 0;
    left: 7.5em;
}
}

.submenu > ul {
    display: none;
}

.submenu > ul > li > a {
    background-color: darkred; /* verander achtergrond kleur van het dropdown menu op desktop versie */
    border-bottom: 1px solid white;
    color: #ffcc00; /* verander text kleur van dropdown menu op desktop weergave */
    display: block;
	font-weight: bold;
    padding: 1em 0.75em 1em 0.5em;
    text-decoration: none;
	width: 7em;
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a {
    background-color: darkred; /* verander achtergrond kleur van het dropdown menu op mobiele weergave */;
    border-bottom: 1px solid navy;
    color: #00cc00; /* verander text kleur van dropdown menu op mobiele weergave */
	font-weight: normal;
	padding: 0.6em 0.8em;
	width: auto;
}
}

.submenu > ul > li:first-child a {
    border-top: 1px solid white;
}

@media screen and (max-width: 800px) {
.submenu > ul > li:first-child a {
    border-top: 0 none transparent;
}
}

.submenu > ul > li > a:hover {
    background-color: #3A0A0A; /* verander achtergond kleur van dropdown menu op desktop weergave */
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
    background-color: #2A0A0A; /* verander achtergrond kleur van dropdown menu op mobiele weergave */
    color: white;
}
}

#hoofdvak {
    background-image: url(afbeeldingen/skihut.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    float: left;
    width: 83%; 
    height: auto;
}

@media screen and (max-width: 800px) {
#hoofdvak {
    background-color: white;
    float: none;
    width: 100%;
}
}

#tekstvak {
    margin: 1.5em;
    min-height: 65vh;
}

@media screen and (max-width: 800px) {
#tekstvak {
    margin: 1em;
    width: 94%;
}
}

#tekstvak p {
    font-size: 1.0em;
	font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 1em;
	color: #3B170B;
	background-color: #F2F2F2;
}

#tekstvak ul, #tekstvak ol {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
    margin-left: 2em;
}

#tekstvak ul li, #tekstvak ol li {
    padding-right: 2em;
    position: relative;
    left: 2em;
}

@media screen and (max-width: 800px) {
#tekstvak ul li, #tekstvak ol li {
    padding-right: 0;
    position: static;
    left: 0;
}
}

#tekstvak h1 {
    text-align: center;
    color: #f2f2f2;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1.2em;
	background-color: #2A0A0A;
}

#tekstvak h2 {
    text-align: center;
    color: #f2f2f2;
    font-size: 1.1em;
    margin-bottom: 0.25em;
    padding-top: 0.25em;
	background-color: #2A0A0A;
}

#tekstvak img {
    max-width: 95%;
}

#balkbeneden {
    background-color: grey;
    clear: both;
    width: 100%;
}

#balkbeneden p {
    color: gold;
    clear: both;padding: 1em;
}

#balkbeneden:after {
    clear: both;
    content: " ";
    display: table;
}

#inhoudbalkbeneden {
    background-color: #2A0A0A;
    float: right;
    padding: 2em 0;
    text-align: center;
    width: 83%;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden {
    float: none;
    width: 100%;
}
}

#inhoudbalkbeneden span {
    border-right: 1px solid white;
    color: green;
    display: inline-block;
    font-size: 0.8em;
    padding: 0.5em 2em;
    white-space: nowrap;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden span {
    border-bottom: 1px solid white;
    border-right: 0 none transparent;
    padding: 0.5em 0;
    width: 100%;
}
}

#inhoudbalkbeneden span:last-child {
    border-bottom: 0 none transparent;
    border-right: 0 none transparent;
}

#inhoudbalkbeneden span a {
    color: green;
    text-decoration: none;
}

.clearfix:after {
    clear: both;
    content: " ";
    display: table;
}

.links {
    float: left;
    margin: 0.4em 0.8em 0.6em 0;
}

.rechts {
    float: right;
    margin: 0.4em 0 0.6em 0.8em;
}

.gecentreerd {
    display: block;
    margin: 0 auto 1em;
}

.lichtjes {
	text-align: center;
}

#foto {
	text-align: center;
}

#photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }

@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
	
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

#speler {
	text-align: center;
}

 /* begin contact pagina */

h6 {
	margin-top: 1em;
	color: #ffff00;
	font-size: 16px;
	text-align : center; 
}

#formulier {
	margin: 0 auto; 
	width: 75%; 
	margin-top: 1em;
	padding: 10px; 
	background: #fff;
}

p {
margin : 0 0 15px 0;
padding : 0;
}
.tekstveld {
height : 20px;  
width : 99%;
border-radius : 5px;
padding : 2px;
border : rgb(201, 201, 201) solid 1px;
}
.tekstvak {
width : 99%;
border-radius : 5px;
height : 200px;
padding : 2px;
border : rgb(201, 201, 201) solid 1px;
}
.submit {
border : #D0D0D0 solid 1px;
background : #E8E8E8;
margin-left : 75px;
width : 200px;
padding : 25px;
margin-bottom : 15px;
margin-top : 5px;
cursor : pointer;
}

  /* einde contact pagina */
  
  /* start link pagina */
.fotolink {
margin : 0 auto 1em;
border : 0;
width : 200;
}
.achtergrond {
background : #000000;
}
.fototext {
text-align : center;
color : #003366;
font-size: 1.5em;
font-weight: bold;
}
/* einde link pagina */

femke98 · 12 nov 2020

om eerlijk te zijn vind ik het niet eens storend.
Als ik mijn browser verklein (van rechts naar links kleiner maken) zie je het menu en verder de rest wel responsive zijn. Het plaatje inderdaad niet, maar je krijgt wel een deel van het plaatje te zien en dat vind ik best grappig.
zie screenshot, maar goed het is geen oplossing

bron · 12 nov 2020

Net als femke vind ik het ook niet storend. Sterker nog, deze techniek wordt vaker toegepast.
Als je de afbeelding responsive zou maken dan wordt de hoogte erg klein op smartphone en kan je het geen achtergrond meer noemen.

Met box-sizing is het probleem met je border links/rechts opgelost.
Font-family zoals georgia en arial werken niet op elk apparaat. Je kan beter iets van Google Fonts laden.

Code:

/* box-sizing voor padding/border */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* responsive img */
img {
    border: 0;
    max-width: 100%;
    height: auto;
}

De regel met respond.min.js kan je eruit halen, die was alleen voor héle oude browsers.

yourdjeric · 12 nov 2020

bron zei:
Net als femke vind ik het ook niet storend. Sterker nog, deze techniek wordt vaker toegepast.
Als je de afbeelding responsive zou maken dan wordt de hoogte erg klein op smartphone en kan je het geen achtergrond meer noemen.

Bedankt weer! :thumb:

Persoonlijk vind ik hem ook top, maar mobiel vind ik niet eruit zien.
Het loopt wel mooi responsive maar de afbeelding vind ik nog niks.
En idd wordt de achtergrond te klein op mobiel, daarom ga ik daar ook in het menu mee verder uitwerken.

bron · 12 nov 2020

Je zou ook background-size kunnen proberen (cover of contain) maar dat werkt alleen als je breedte en hoogte opgeeft.

Code:

html, body {
    height: 100%;
}
body {
    background-image: url('afbeeldingen/logo.png');
    background-repeat: no-repeat;
    /* cover of contain */
    background-size: cover;
}
#websitevak {
    width: 100%;
    min-height: 100%;
}

yourdjeric · 13 nov 2020

bron zei:
Je zou ook background-size kunnen proberen (cover of contain) maar dat werkt alleen als je breedte en hoogte opgeeft.

Ik heb ook eens nagedacht over de breedte en hoogte op te geven, en ging hier eens dieper op in.
De resultaat liegt er niet om mijn grote en klein scherm geven een mooie resultaat weer zoals ik hem wil hebben, mobiel iets minder... daar blijft de breedte niet goed in beeld. (je ziet de helft)
maar ik heb ontdekt als je de mobiel kantelt (scherm draaien) de gehele weergave wel te zien is!

ik weet niet hoe jullie ervaring ermee is, maar dit lijkt mij nu wel het gewenste resultaat of kan het nog beter?
site check

Bekijk bijlage 352605

femke98 · 14 nov 2020

Ongeldig(e) Bijlage opgegeven. Neem contact op met de webmaster als u een geldige koppeling hebt gevolgd.

Die kan ik dus niet zien.

Als ik mijn browser verklein zie ik het zo, zie plaatje.
Veel minder mooi dan hoe het eerst was.

Mensen doen denk ik niet hun mobiel omdraaien voor een website, althans, ik doe het nooit! Dus je beeld moet toh ook in de lengte goed te zien zijn, en dan vond ik hoe het was een stuk mooier. Maar goed, alleen de browser verkleind naar smartphone formaat. Niet met eigen mobiel gekeken.

bron · 15 nov 2020

maar ik heb ontdekt als je de mobiel kantelt (scherm draaien) de gehele weergave wel te zien is!

Dit kan je niet van een website bezoeker verwachten. Iedereen houdt de smartphone als "portrait" (vertikaal) in z'n handen.

De HxB verhouding van de achtergrond wil je hetzelfde houden, daarom zal je op elke resolutie een stuk missen, het maakt niet uit of het een laptop, monitor, tablet of smartphone is.
Je mist boven/onder een stuk als je van width:100% uitgaat, je mist links/rechts een stuk als je van height:100% uitgaat.

Tip: gebruik vw of vh
1vw (1% van de breedte) en 1vh (1% van de hoogte) kan je beide voor de breedte én voor de hoogte gebruiken, bijvoorbeeld height:50vw;

Tip: gebruik calc
Je kan simpele berekeningen doen, bijvoorbeeld height:calc(3 * 50vw - 50px)
Dit kan je niet testen op alle apparaten die in omloop zijn dus bij calc() altijd even nadenken hoe de weergave wordt op andere resoluties.

yourdjeric · 15 nov 2020

bron zei:
Tip: gebruik vw of vh
1vw (1% van de breedte) en 1vh (1% van de hoogte) kan je beide voor de breedte én voor de hoogte gebruiken, bijvoorbeeld height:50vw;

Tip: gebruik calc
Je kan simpele berekeningen doen, bijvoorbeeld height:calc(3 * 50vw - 50px)
Dit kan je niet testen op alle apparaten die in omloop zijn dus bij calc() altijd even nadenken hoe de weergave wordt op andere resoluties.

vw / vh ken ik wel, maar calc nog nooit van gehoord, goed ik laat het even liggen en ga er nog keer mee aan de slag.
reuze bedankt voor jullie tips & ingeving :thumb:

Achtergrond responsive maken

yourdjeric

Gebruiker

femke98

Meubilair

Bijlagen

bron

Moderator

yourdjeric

Gebruiker

bron

Moderator

yourdjeric

Gebruiker

femke98

Meubilair

Bijlagen

bron

Moderator

yourdjeric

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy