Definere og placere dit headerbillede med CSS i WordPress Twenty Fifteen - dummies

De fleste temaer har et headerbillede, der vises øverst på siden. I WordPress genereres dette billede af en grafisk defineret enten i CSS-værdien for den egenskab, der repræsenterer overskriftsområdet eller ved brug af en brugerdefineret headerfunktion i WordPress.

Definere et baggrundsbillede, der skal bruges som et overskrift

I WordPress-standardens Twenty Fifteen-tema, herunder et brugerdefineret headerbillede på et websted, der bruger temaet Twenty Fifteen, er det godt at være let. Alt det hårde arbejde er blevet gjort for dig.

I temaer, der ikke har den brugerdefinerede header-billedfunktion, kan du nemt definere et baggrundsbillede til headerbilledet ved hjælp af CSS. I dette eksempel er HTML-markeringen for overskriften i skabelonen

I CSS-formatet (style. Css) kan du bruge et baggrundsbilde ved at definere det i CSS-egenskaberne for #header. Brug denne kode:

#header {baggrund: url (/ images / header-image. Jpg) no-repeat; bredde: 980px; højde: 100px;}

Baggrundsværdien angiver et headerbillede. jpg billede. For at billedet skal vises på dit websted, skal du oprette billedet og uploade det til din webserver i / billeder / mappen.

Når du arbejder med grafik på internettet, skal du bruge GIF, JPG eller PNG billedformater. For billeder med et lille antal farver (som diagrammer, linjekunst, logoer osv.) Fungerer GIF-format bedst. For andre billedtyper (skærmbilleder med tekst og billeder, blandet gennemsigtighed osv.) Skal du bruge JPG eller PNG.

Placering, gentagelse eller rulle dit baggrundsbillede

Når du har uploadet en grafik, der skal bruges i dit tema, kan du bruge CSS-baggrundsegenskaber til at placere det. De vigtigste CSS-egenskaber - baggrundsstilling, baggrundsreagering og baggrundsvedhæftning - hjælper dig med at opnå den ønskede effekt. Tjek CSS baggrundsegenskaberne og deres tilgængelige værdier for at ændre dem i dit tema stilark.

Ejendom	Beskrivelse	Værdier	Eksempel
baggrundsposition	Bestemmer startpunktet for dit baggrundsbillede på din webside	bund center nederst til højre venstre center højre center center center	baggrundsstilling: bottom center;
background-repeat	Bestemmer, om dit baggrundsbillede gentages eller flise	gentag (gentages uendeligt) gentag-y (gentages lodret) gentag-x (gentages vandret) < nej gentag (gentages ikke) baggrunds-gentagelse: gentag-y;	baggrundsvedhæftning
Bestemmer, om dit baggrundsbillede er fast eller rulle	med browservinduet Fast	rulle baggrundsvedhæftning: scroll;	Du kan undersøge placeringen af ​​header-grafikken med nogle af ovenstående værdier.Hvis du er en visuel person, vil du nyde testning og justering af værdier for at se effekterne på dit websted.

Sig, at dit mål er at

flise, eller gentag baggrundsbilledet vandret, eller på tværs af browservinduet fra venstre mod højre, så det skaleres med bredden af ​​browseren på enhver computer. Du vil også ændre baggrundsfarven til en anden farve (som hvid, som i den følgende prøve). For at opnå dette skal du åbne stylesheet igen og ændre: baggrund: # f1f1f1;

til

baggrund: #FFFFFF; baggrundsbillede: url (billeder / header-image. jpg); baggrunds-gentagelse: gentag-x;

eller du kan bruge

baggrund: #FFFFFF url (billeder / header-image. Jpg) repeat-x;