Achtergrond

Status
Niet open voor verdere reacties.

tombalfoort

Gebruiker
Lid geworden
25 sep 2006
Berichten
386
Hoe kan ik ver voor zorgen als ik dit stukje CSS heb voor de achtergrond dat achtergrond er voor 100% in komt. Zonder dat ik de resolutie er voor moet aanpassen?

Heb niks kunnen vinden tot nu toe.

Code:
	margin: 0 auto;
	padding: 0;
	background-color: #F9F7F8;
	background-image: url('../images/Page-BgTexture.jpg');
	background-image: url('http://www.**********.net/templates/natural/background/bg.php');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom center;
 
Laatst bewerkt:
Eh, ik wil niet zeuren, maar van background-size heb ik nog nooit gehoord :D
De achtergrond-afbeelding vult automatisch het volledige element waar hij in staat. Als hij te klein is, wordt hij gewoon herhaald tot alles vol is.
Jij hebt staan: background-repeat: no-repeat
Dan wordt de afbeelding niet herhaald. Als hij te klein is, vult hij niet alles.
Je hebt trouwens twee afbeeldingen, dat kan niet. De tweede eindigt op .php, dat kan nooit 'n achtergrond-afbeelding zijn.
Ik denk dat het zo moet zijn:
margin: 0 auto;
Code:
{	padding: 0;
	background-color: #F9F7F8;
	background-image: url('../images/Page-BgTexture.jpg');
	background-attachment: fixed;
	background-position: bottom center;
}

Dat mag ook zo:
Code:
{   padding: 0;
    background: #F9F7F8 url(../images/Page-BgTexture.jpg) fixed bottom center;
}
Hoeft niet, maar 't is korter.
Ik zou trouwens geen hoofdletters in bestandsnamen en paden gebruiken. Op WIndows maakt dat niet uit, op de server meestal wel.
 
Laatst bewerkt:
Ik was het vergeten mee te kopieren maar dit

Code:
background-image: url('../images/Page-BgTexture.jpg');

Stond in de css style met /* */ zodat deze niet gelezen werd.

Verder wordt er in het php bestand een afbeelding verwerkt, maar omdat ik elke keer een andere afbeelding wil heb ik hiervoor een php scriptje gevonden.

Ik zal proberen om

Code:
margin: 0 auto;

te gebruiken. Als het niet werkt dan komt ik weer terug. Als het wel werk kom ik ook terug om de status van de vraag aan te passen ;)
 
Sorry,

Deze code werkt helaas niet. Hij blijft hetzelfde. Heb het geprobeerd met een paar aanpassingen. Zoals

Code:
margin: 1000 auto;
 
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

Background-size: 100%; is een CSS 3 property en wordt vaak gebruikt. Het stretcht je plaatje zodat het het hele contentvak vult.

anders kun je nog wat proberen met height:100% en width: 100%
 
Laatst bewerkt:
Het werkt,

Ik ga nog even wat proberen en als ik daar nog problemen mee heb, kom ik hier terug.
 
Laatst bewerkt:
Voor mensen 't gaan gebruiken...
background-size is inderdaad een css3-eigenschap, die nog in geen enkele browser werkt. In Internet Explorer 6, 7 en 8 werkt het helemaal niet.
In Firefox werkt het als experimentele versie. Maar niet als background-size, maar als -moz-background-size (experimenteel begint altijd met 'n standaard-voorvoegsel, en dan uiteindelijk gewoon background-size).
In Opera werkt het, maar niet als background-size, maar als het experimentele
o-background-size
In Safari en Google Chrome werkt het als het experimente -webkit-background-size

Op deze pagina kun je het live uitproberen:
http://www.css3.info/preview/background-size/
(Als je de code bekijkt, zie je dat daar geen background-size wordt gebruikt, maar de experimentele vormen.)
Vergelijkingspagina:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

In Firefox wordt het inderdaad ingebouwd in de komende versie 3.6, momenteel moet je nog moz-background-size gebruiken:
https://developer.mozilla.org/en/CSS/-moz-background-size

Als laatste Safari (en dus Google Chrome):
http://developer.apple.com/mac/libr...rties.html#//apple_ref/doc/uid/TP30001266-SW1

Maar momenteel werkt background-size zonder voorvoegsel nog nergens, en zolang 't alleen in de komende versie van Firefox (3.6) werkt heb je er weinig aan in de praktijk. Hooguit voor leuke extra dingen in de browsers die 't wel ondersteunen.
 
Laatst bewerkt:
Ok, dan weet ik dat ook meteen. Ik gebruik zelf Google Chrome, vandaar dat het wel bij mij werkte.

Maar ik zit met de volgende vraag.

http://www.sprousebrosfans.net/templates/natural/css/template.css

Daar vind je een css bestand van mijn website. Maar nu wil ik dat er tekst uit dit

Code:
<div class="art-PostContent"> 
<div class="art-article"><p>Welcome on a new fansite. A new fan site all about the Sprousebrothers.</p> 
<p>There will be come more soon !!!</p></div><span class="article_separator">&nbsp;</span> 
</div> 
<div class="cleared"></div>

Wit wordt. Alleen lukt mij het echt niet. Heb het al in de body gezet

Code:
text-color: #FFFFFF

Maar dat werkt dus niet. Hoe zou ik dit kunnen oplossen dan?

Groetjes Tom.

P.s. Is er dan nog een andere manier om een afbeelding het scherm te laten vullen. Zo niet, dan moet ik zelf iets gaan bedenken met de grote van monitoren.
 
Ok mijn excuses voor de foutieve informatie
Ach, da's 't voordeel van 'n forum. Ik wordt ook nog wel 'ns verbeterd :)

De witte tekstkleur:
In principe zou het volgende moeten werken:
Code:
div.art-PostConten {color: white;}
of
Code:
p.art-article {color: white;}
(Of #fff in plaats van white, net wat je wilt.)

Maar 't kan zijn dat dat ergens anders wordt overruled door 'n selector die meer specificiteit (gewicht) heeft of zo. Daar is zo eigenlijk heel weinig van te zeggen.
Geef anders even 'n link naar waar 't online staat.

De achtergrond. Nee, die is er niet. 'n Achtergrond-afbeelding heeft van zichzelf geen enkele maat, hij vult alleen maar het element waar hij in staat. Als de afbeelding kleiner is dan dat element, vult hij het gewoon niet. Dat wil zeggen: als je no-repeat opgeeft. Anders wordt de afbeelding gewoon eindeloos herhaald in de hoogte en breedte, tot het hele element is gevuld.
Dus je zou eigenlijk 'n afbeelding moeten maken die even groot is als het grootste venster. Maar daar maak je je niet populair mee, want die zijn in omvang (meestal) veel te groot en dan duurt 't downloaden te lang.
Vaak wordt daarom gekozen voor 'n combinatie van achtergrondkleur en achtergrond-afbeelding.
Je zou ook 'n gewone afbeelding kunnen nemen en die oprekken tot de grootte van het scherm. Maar dan is de kans dat dat foeilelijk wordt vrij groot. Omdat die afbeelding gewoon te klein is, gaat de browser er pixels tussen zetten in wat - volgens de browsers - 'n goede kleur is. Niet elke browser doet dat goed. Feitelijk doet geen enkele browser dat echt goed en 'n aantal puur slecht, afhankelijk van de afbeelding. Zelfs gespecialiseerde grafische programma's hebben hier moeite mee.
Dus dat is ook geen goed idee, volgens mij.
Bij dat oprekken moet je trouwens maar alleen in de breedte 100% opgeven. Als je dat ook in de hoogte doet, krijg je 'n lachspiegel-effect omdat beide richtingen in ongelijke mate uitrekken.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan