Full image background Wordpress

[Iris17]

hoi,

in DW heb ik al een aantal sites met full image backgrounds (thanks CSSHunter!), maar nu wil ik in WP ook graag een full image background.
Met deze code:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #DDD;


background-image:url(images/bungalows2.png);
width:100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;

krijg ik als resultaat dat de bungalows niet full image zijn, maar herhaald worden. Dat is dus niet de bedoeling.
Heeft iemand de tip voor me? Moet ik iets in index.php aanpassen?

Ik hoor graag.

mvrgr


Iris

 

[csshunter]

Hoi Iris,
Een background-image laat zich niet schalen, tenminste niet met css2.1. Wel met css3, maar dat wordt nog niet door alle browser(versie)s ondersteund.

Voorlopig ben je dus aan gewezen op een extra (absolute/fixed) div van 100% width en 100% height, waar het "background"-image als voorgrond-image in is gezet (dan kan dat wel een width="100%" en height="100%" krijgen).

• Deze div komt als eerste in de html.
• De rest van de site kan er dan in een laag bovenop komen.
• Hoe dat precies in Wordpress ingevlooid moet worden, weet ik niet.
  Denkelijk zal het een plekje moeten krijgen in een of ander php-bestand van het WP-template, want het moet er natuurlijk op alle pagina's in komen.

Analoog aan de staande Marjanne aan de linkerkant in het Reisverslag (blz. 12 e.v.)!

Met vriendelijke groet,
CSShunter

 

[Iris17]

Iemand die mij kan helpen????

hoi,

ik ben op 2 manieren aan het stoeien met die full image background. Allereerst door een plugin te installeren in Wordpress (simple fullscreen background image) maar daarbij krijg ik de foutmelding:
Uploaden van "bungalows.jpg" is niet gelukt als gevolg van een fout
Kan map /Applications/XAMPP/xamppfiles/htdocs/xxxx/wp-content/uploads/2012/08 niet aanmaken. Is de bovenliggende map beschrijfbaar door de server?
Uiteraard al flink gegoogled hierop maar de oplossing ligt niet voorhanden. Iemand op dit forum die het antwoord weet?

Ik probeer het ook op een andere manier, in DW.
Daarbij heb ik in de header.php onder body het volgende toegevoegd:
<p><img src="<?php bloginfo("template_directory")?>/images/xxxxx.png" alt="xxxxxx" width="100%" /></p> en ja, dan krijg je de image full-screen. Echter je container verdwijnt dan in het niks..... Die al proberen terug te plaatsen met de nodige z-indexen, maar dat werkt dus niet. De pagina wordt nl als image weergegeven (vernieuwen enzo werkt ook niet meer, alleen bv 'afbeelding opslaan als')

dussssss, fijne uitdaging. Iemand die voor mij de oplossing heeft?

bvd

iris

 

[csshunter]

Als je de <p> tot <div> maakt en een id meegeeft?

<div id="bgimg"><img ... enz. /></div>

met:

html {
    ...
    height: 100%;
    }
#bgimg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
#bgimg img {
    width: 100%;
    height: 100%;
    }

Zo kan de afbeelding in de hoogte platgedrukt of uitgerekt worden, afhankelijk van het vensterformaat van de brower; maar als het een foto is en niet een abstractie figuur, kan dat een raar vertekend beeld opleveren.

Als je de height voor het img weglaat, wordt de hoogte in verhouding t.o.v. de breedte gemaakt, dus in de goede verhouding; maar bij een hoog en smal venster komt er dan speling onder de afbeelding (tenzij je 'm herhaalt). En bij een "breedbeeld-venster" (niet hoog, wel breed) wordt de onderkant en/of bovenkant van de afbeelding afgesneden.

Als je de height vastprikt op 100% en de width vrijlaat, gebeurt iets dergelijks: met speling ernaast, horizontaal herhalen of L/R afsnijden van de afbeelding.

't Is ook altijd wat!
Maar ja, een afbeelding kan ook niet tegelijkertijd een portrait of landscape zijn!

Met vriendelijke groet,
CSShunter

 

[femke98]

Je kan die map waar ze het over hebben, toch schrijfbaar maken?
Dat is 777 maken. Hij zal nu op 655 staan of zo.