2 achtergronden op 1 pagina.

djeric · 8 dec 2015

Hallo

Ik wilde 2 verschillende achtergronden gebruiken voor me website.
de bovenste helft (achtergrond 1) wordt voorzien van een plaatje. hier komt dan o.a. het logo erop te staan.
de onderste helft (achtergrond 2) wordt voorzien van de inhoudt met een zwart achtergrond. (mag in html kleur zijn, of ik gebruikte een plaatje)

hoe kan ik dit het beste aanpakken? in me code heb ik dit gedaan:

HTML:

<body background="1.jpg" background="2.jpg">
 </body>

Code:

div.background {
        background-image: url("1.jpg"), url("2.jpg");
        background-repeat:no-repeat, no-repeat;
        background-position:top left, 200px 0px;
}

resultaat: ik zie alleen achtergrond 1 op een volledige pagina.
iemand enige idee wat er mis gaat en hoe ik dit oplos?

gast0660 · 8 dec 2015

Hoi,
je blijft maar tegen problemen aanlopen,
Eerst uw logo, dan met uw navigatie balk, gisteren met uw plaatje en de terechte commentaren over uw webhulpje en veel te druk en vandaag nu weer dit probleem
Maar goed zal nog eens een voorzetje geven met deze mischien een oplossing?

djeric · 8 dec 2015

gast0660 zei:
Hoi,
je blijft maar tegen problemen aanlopen,
Eerst uw logo, dan met uw navigatie balk, gisteren met uw plaatje en de terechte commentaren over uw webhulpje en veel te druk en vandaag nu weer dit probleem

Ik weet het... en dan ook niet eens kunnen uitvoeren wat je hebt gemaakt.

Maar als ik zo goed was deed ik t zelf en reageerde niet op helpmij.
Echter vind ik een neutraal strak en leeg gevulde website oersaai en val regelrecht in slaap. Ook heb ik dit van meer bezoekers gehoord dat ze dat niets aan vinden en moeten gapen.
Wat kleur vonden ze vrolijker.
ik wou dan iets tussen in bouwen, maar snap toch niets van html en css in de afgelopen 15 jaar.
pffffffff. je wilt een site, maar zal nooit lukken er 1 te bouwen als je neit een beetje kennis hebt.

er zijn mensen bij zoals ik... die kunnen het nooit leren. maar ik ben er zo 1... ik wil eht wel leren, maar moet dan een goed resultaat zien dat ik zelf ook mooi vind.
eerlijk is eerlijk: je resultaten zijn netjes! en het logo wordt zeker gebruikt. maar de opbouw wat je me toen gaf vind ik een brok ellende en oersaai. (sorry dit is mijn mening)

ontopic:

Je stuurde me de code voor 2 achtergronden, maar echter werkt de 2xachtergond.html niet. (Kan bestand of directory niet vinden.)
zal vast de extensie in de bron code verkeerd staan.

:thumb:

gast0660 · 8 dec 2015

Hoi,
Probeer eens volgende code in het 2x achtergrond pagina

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<a href="achtergrond1.html">
<iframe name="frame1" src="achtergrond1.html"width="100%" height="300"></iframe>
</a>
<a href="achtergrond2.html">
<iframe name="frame2" src="achtergrond2.html"width="100%" height="300"></iframe>
</a>
</body>
</html>

Off topic,
Wie ben ik om over kleuren e.d. te gaan, ( ik viel op blond maar ondertussen is ze grijs:shocked

Alleen als ik perfect werkende scriptjes aanreik die volledig op uw eigen hosting kunnen draaien zonder 3th party en dan zit je binnen een paar uur weer op webhelpje ed dan heb ik wel mijn bedenkingen
Verder no problem

greetz

djeric · 8 dec 2015

gast0660 zei:
en dan zit je binnen een paar uur weer op webhelpje ed

Zat ik 15 jaar terug al.... dus heb de link ernaar toe gebruikt.

maar kan beter met een goed voorbeeld starten. (een plaatje op site check zie: klik
Toen ik daar de tips kreeg. (te veel kleur e.d.) had ik zoiets van ok, dit wordt hem ook niet...
Maar de indeling is wel zo precies ik hem in me hoofd had, maar had het niet uitgebeeld in paint. (fotoshop had beter geweest, maar ben ook daar een leek in)
Beste is ik zelf alles bouw en leer. Dit wil ik wel doen, maar ken enkele basis begrippen en ben eht eens elke keer wat veranderd.

Daarom per heden: Ik ga door met het bouwen tot er goed resultaat te zien is en regelmatig checken of het iets wordt.
Dat van andere pagina's zoals gastenboek, tellers, chats e.d. laat ik eventjes achter wegen... belangrijker is een goed werkende website te krijgen met jullie hulp. :thumb:

Maar nu... de 2 achtergronden staan op een html pagina ingedeeld met een bepaalde grote.
als ik dit aanpas op me scherm op gewenste formaat, werkt dat toch niet voor iedereen op: andere scherm resoluties, ander type beeldschermen, tablets, mobiele telefoons e.d. ?
of toch wel?
Wel snap ik de opmaak ervan.

hans013 · 8 dec 2015

je kunt in je html pagina een tabel maken.

bovenste veld 1 kleur en onderste veld 1 kleur

Naarling · 8 dec 2015

Je CSS ziet er op het eerste gezicht goed uit, ik zou wel even controleren of de afbeeldingen inderdaad staan waar je zegt dat ze staan. Uit de HTML kun je de background weghalen, die hoort daar niet thuis.

Heb je een werkend voorbeeld van de pagina?

NB: deze methode werkt niet in IE8, gelukkig wordt die browser nog nauwelijks gebruikt.

@hierboven: tabellen en frames zijn nou niet echt goede oplossingen hiervoor, en maken de pagina alleen maar lastiger te onthouden.

djeric · 8 dec 2015

Naarling zei:
NB: deze methode werkt niet in IE8, gelukkig wordt die browser nog nauwelijks gebruikt.

@hierboven: tabellen en frames zijn nou niet echt goede oplossingen hiervoor, en maken de pagina alleen maar lastiger te onthouden.

iets wat is dus ook begrepen had op div. html/css cursussen

Maar ja... hoe dan wel?
ik wil boven aan een achtergrond (plaatje 1)
de rest eronder ander achtergrond (plaatje 2 of html kleur)

hans013 · 8 dec 2015

Werk met een tabel.
<table>
<tr>
<td background='plaatjes.jpg'>
</td>
</tr>
<tr>
<td background='plaatje2.jpg'>
</td>
</tr>
</table>

Naarling · 8 dec 2015

Zoals ik zei, je CSS klopte volgens mij, zie bijvoorbeeld ook dit voorbeeld. Dus zonder attribuut in de HTML.

Maar, als het alleen om een plaatje en een kleur gaat kan het veel simpeler;

Code:

body{background:url(plaatje.jpg) top left no-repeat #000}

Zo heb je in één regel de link naar de afbeelding, positie van de afbeelding, herhalingsoptie en de achtergrondkleur die voor de rest van het element moet worden toegepast.

bron · 8 dec 2015

... Echter vind ik een neutraal strak en leeg gevulde website oersaai en val regelrecht in slaap. Ook heb ik dit van meer bezoekers gehoord dat ze dat niets aan vinden en moeten gapen....

Off topic. Hangt volgens mij van de doelgroep af. Een website voor een kinderfeestje is anders van kleur dan een website voor een begrafenis. De layout van een dure audiowinkel website is rustiger dan die van een heavy metal concert.

djeric · 9 dec 2015

Naarling zei:
Maar, als het alleen om een plaatje en een kleur gaat kan het veel simpeler;

Code:

body{background:url(plaatje.jpg) top left no-repeat #000}

Zo heb je in één regel de link naar de afbeelding, positie van de afbeelding, herhalingsoptie en de achtergrondkleur die voor de rest van het element moet worden toegepast.

echter geen afbeeldings formaat, en pakt hij het volledige plaatje. (in mijn geval over de hele

bron zei:
Off topic. Hangt volgens mij van de doelgroep af. Een website voor een kinderfeestje is anders van kleur dan een website voor een begrafenis. De layout van een dure audiowinkel website is rustiger dan die van een heavy metal concert.

Dit klinkt heel logisch! bedankt voor de simpele tip!

nu ontopic voor precies de juiste instelling.
ik heb ontdekt de volgende doelstelling het beste werkt, maar is het volgende goed?

HTML:

<!DOCTYPE html>
 <html lang="nl">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>wat is er nieuw op hitdance radio</title>
 <meta name="description" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, met muziek voor jong en oud, en de leukste dj's"> 
 <meta name="keywords" content="online, dj, muziek, hard dance, hardstyle, live dj, nieuws, dj team, live, live dj, radio luisteren, verzoekplaat, verzoekjes, spiegelplaat, facebook, radio, live streams, boekingen, gezocht, draait">
 
 <meta name="viewport" content="width=device-width, user-scalable=yes">
 
 <link href="hitdance.css" rel="stylesheet" type="text/css">
 </head>

<body>

<div id="achtergrond"></div>

 </body>
 </html>

en de css:

Code:

body{background:#000000}

div#achtergrond{
background: #000000 url(plaatjes/achtergrond.jpg) no-repeat 0 0;
background-attachment: scroll; 
height: 300px;
width: 100%;
}

wat denken jullie, mijn huidige code wat ik nu hier hebt staan wel de perfecte methode is?

doel: bovenste helft voorzien van achtergrond plaatje
overige deel voorzien van achtergrond kleur.
werkend op: alle type scherm resoluties, tablet's en mobiel telefoons.

bron · 9 dec 2015

Hi,

Je gebruikt een html5 doctyppe, dan begint je html zo

Code:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wat is er nieuw op hitdance radio</title>
<meta name="description" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, met muziek voor jong en oud, en de leukste dj's">
<meta name="keywords" content="online, dj, muziek, hard dance, hardstyle, live dj, nieuws, dj team, live, live dj, radio luisteren, verzoekplaat, verzoekjes, spiegelplaat, facebook, radio, live streams, boekingen, gezocht, draait">
<link href="hitdance.css" rel="stylesheet" type="text/css">
</head>

Je kunt ook eens hier naar kjijken, bijvoorbeeld

Code:

div#achtergrond {
	height: 300px;
	width: 100%;
	background: #000000 url(plaatjes/achtergrond.jpg) no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

In deze css ga ik ervan uit dat je IE8 logisch niet meer ondersteund. Wie wel? :d

Suc6. have fun.

djeric · 9 dec 2015

bron zei:

dit stukje is even chinees raadsel voor me...
Maar zie nu wel als resultaat het beter werkt als mijn aanvulling.
* het volledige plaatje staat erop, en bij mij code kwam die half erop. (de breedte)
* hij verkleint mooi mee als je scherm verkleint. (deed in mijn code ook niet)

dus super work! :thumb:

bron · 9 dec 2015

Mooi dat je het kunt gebruiken.

Wat achtergrond info

Een css "prefix" is voor oudere browsers die css3 functionaliteit missen. Een prefix is géén hack, het is een officieel voorvoegsel voor css3 eigenschappen. De prefixen zijn nu nodig maar zullen over een tijdje niet meer nodig zijn omdat oude browsers steeds minder worden gebruikt.

-webkit- (voor oude Android, iOS, Chrome, Safari)
-moz- (voor oude Firefox)
-o- (voor oude Opera)
-ms- (voor oude Internet Explorer)

Bij elke css3 eigenschap zal je even moeten kijken welke extra prefix regels nodig zijn.

4 willekeurige css3 voorbeelden bij Internet Explorer met daarbij vanaf welke versie je geen prefix meer nodig hebt:
IE8+ -> box-sizing
IE9+ -> border-radius
IE10+ -> transition
IE11+ -> flex

Suc6. Have fun.

djeric · 9 dec 2015

bron zei:
Een css "prefix" is voor oudere browsers die css3 functionaliteit missen. .

dus als ik het goed begrijpt kan eigenlijk deze code weg na een tijdje als de oudere browsers niet meer ondersteunt worden met hulp van de "prefix"

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Naarling · 9 dec 2015

Voor background-size is dat eigenlijk al niet meer nodig, je moet behoorlijk ver terug gaan om browsers te vinden die die prefixes nodig hebben, het aantal gebruikers is niehiel. In geval van twijfel kun je altijd op deze site kijken om er achter te komen welke browsers iets ondersteunen.

djeric · 9 dec 2015

Naarling zei:
Voor background-size is dat eigenlijk al niet meer nodig, je moet behoorlijk ver terug gaan om browsers te vinden die die prefixes nodig hebben, het aantal gebruikers is niehiel. In geval van twijfel kun je altijd op deze site kijken om er achter te komen welke browsers iets ondersteunen.

meteen als favorieten bij gezet, kan nuttige info zijn. tnx:thumb:

bron · 9 dec 2015

Voor background-size is dat eigenlijk al niet meer nodig, je moet behoorlijk ver terug gaan om browsers te vinden die die prefixes nodig hebben

Ik neem de prefixen voor background-size in mijn sites wel op. Firefox 40, Android 4.3 en Opera 32 zijn niet zo oud. Het is natuurlijk aan de bouwer waar hij/zij de ondergrens legt. Bij mij is dit momenteel de lijn van IE9. - btw: polyfill's gebruik ik niet in verband met performance.

@naarling, helemaal met je eens dat Can I Use voor ons een must is!

Have fun.

2 achtergronden op 1 pagina.

Gebruiker

Terugkerende gebruiker

Bijlagen

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Gebruiker

Terugkerende gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Terugkerende gebruiker

Gebruiker

Moderator

Wij waarderen jouw privacy