Problema inserimento Immagine in Background

[imejopitbul84]

Salve a tutti Cari Amici,


Ho un problema e non riesco a capire perchè  non riesco a mettere un immagine in background su questo mio sito.


Ho letto le varie guide in giro nel forum, ma non ho risolto nulla.


Ho scaricato il modulo Background Styler, ho seguito passo passo la guida nella JED e anche un video, ma su questo template non cavo ragno da un buco...


Pubblico il modulo nella posizione Debug, all'interno nelle impostazioni del modulo specifico la posizione che prendo usando firebug e prendo Body, ma nella posizione body non appare nulla...


Chi mi può dare una dritta ?
Le informazioni  del problema che ho dato possono essere sufficienti ?
Come Sempre ringrazio anticipatamente tutti !!!

[giusebos]

prova con questo codice, ma se non funziona sostituisci html con body

Codice: [Seleziona]

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

[imejopitbul84]

Ciao, grazie per l'aiuto, ma non ho capito in quale linea del css del template devo inserire questa stringa...
Ho fatto un paio di prove disabilitando il modulo background styler, ma non funziona perchè topperò sicuramente la posizione..


la mia immagine ha questo percorso /images/immagine-coordinata/immagine-coordinata.jpg


Chiedo scusa ancora per la mia ignoranza in materia...

[adottauncane]

Ciao

se l'immagine la metti nella cartella images della root devi mettere il percorso assoluto:

Codice: [Seleziona]

body {    background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") repeat scroll 0 0 transparent;    color: #46462B;    font-family: helvetica neue,helvetica,arial,verdana,sans-serif;    line-height: 1.3em;}template.css riga 4

perciò forse ti conviene spostarla della cartella images del template, vedi tu.

Poi devi levare i vari background che la coprono, tipo:

Codice: [Seleziona]

#top-site {    background: url("../images/header.jpg") repeat-x scroll 0 0 transparent #FFFFFF;    height: auto !important;    left: 0;    min-height: 740px;    position: relative;    top: 0;    width: 100%;    z-index: 1;}o almeno il #FFF

poi ci sono le ombrine laterali che vanno sotto, il content da ricolorare, insomma un po' di modifiche per sistemarlo.

Comunque, se solo lo inserisci non lo vedi per via dei vari sfondi che lo coprono...

[imejopitbul84]

Grazie Mille !!!

Il tutto funziona, ho solo un problemino... sul tablet l'immagine sbarella, ne senso che o si taglia o viene ripetuta :-)


Ho toppato qualche passaggio ?  (stò prendendo spunto da questo sito) stò provando a repplicarlo, tanto per impratichirmi ;-) ... ma noto che faccio Pena..e ne ho da imparare.


Dove toppo ?

[adottauncane]

Desso io non ho un tablet...
tu prova ad aggiungere le regole suggerite da giusebos che fanno adattare l'immagine alla finestra

Codice: [Seleziona]

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

[adottauncane]

Se non vuoi che si ripeta metti no-repeat al posto di repeat qui:

Codice: [Seleziona]

background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") repeat scroll 0 0 transparent;

[imejopitbul84]

Il codice da incollare nella riga 4 del template.css è corretta, nel senso con il no-repeat e funziona tutto a meraviglia grazie ai vostri consigli ! ! !


ho provato ad inserire anche questi, ma l'immagine mi si allarga totalmente e non stà più nelle dimensioni    fà una sorta di resize ma si allarga a tutto schermo 

Desso io non ho un tablet...
tu prova ad aggiungere le regole suggerite da giusebos che fanno adattare l'immagine alla finestra

Codice: [Seleziona]

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

[adottauncane]

Certo, quel css serve a quello, se non vuoi quell'effetto non lo metti. Se va bene per il tablet mettendo solo no-repeat sei a posto.

[imejopitbul84]

Io come codice ho inserito questo


[/code]body {    background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") repeat scroll 0 0 transparent;   
color: #46462B;   
font-family: helvetica neue,helvetica,arial,verdana,sans-serif;   
line-height: 1.3em;}

Codice: [Seleziona]



Poi ho modifica il repeat con no-repeat e il codice intero è questo:


body {background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") no-repeat center center fixed;
color: #46462B;
font-family: CenturyGothic;
line-height: 1.3em;
min-height: 769px;
margin: 0 auto;
padding: 0px;

Codice: [Seleziona]



[font=arial][size=small]Questo è quello che io ho nel Css alla riga 4 dove ho inserito il codice, e grazie al vostro aiuto funziona, è corretta tutta la riga ?[/font][/size]
[font=arial][size=small]
[/font][/size]
[font=arial][size=small]Grazie mille ancora[/font][/size]

[adottauncane]

Se funziona...

Metterei l'immagine nella cartella images del template e scriverei il percorso relativo invece che assoluto, ma va bene anche così...

Codice: [Seleziona]

background: url("../images/immagine-coordinata.jpg") no-repeat center center fixed;

[imejopitbul84]

Si, metterò le immagini nel percorso relativo, (è stato un passaggio a cui non avevo dato peso, per mancanza di esperienza!!).


Ma le immagini in background non si bloccano, ma tutto il menu e contenuto mi si sposta con lo scrool del mouse..


In più a diverse dimensioni del display il tutto si disallinea 


Sicuramente ho fatto qualche cavolata io.. vero ?


Grazie Mille Come Sempre !

[adottauncane]

E bhe sì... Normalmente le immagini inserite nel backend non sono fatte per interagire con il resto del template nel modo in cui vorresti tu... Sono decorative e fanno da sfondo. Per ottenere il risultato che vuoi devi spezzettarle e inserirle in altro modo.

[imejopitbul84]

Ringrazio ancora tutti per le dritte che mi date !!!


ora io ho inserito questo codice nel css, ho integrato un paio di comandi

position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 1024px;
z-index: -9999;
Ora riesco a bloccare l'immagine in background allineata al contenuto, mentre prima se aprivo firebug l'immagine andava verso l'alto e si disallineava dal contenuto del sito... ma un' ultimo ma... se io ridimensiono la finestra non vedo la barra di scorrimento, sia quella verticale che orizzontale...
Qualche Rimedio ?

Questo codice l'ho inserito solo con firebug nel css, ma non è ancora nel css del template.

[/code]background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") no-repeat scroll 50% 50%;
color: #46462B;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 1024px;
z-index: -9999;
font-family: CenturyGothic;
line-height: 1.3em;
min-height: 769px;
margin: 0 auto;
padding: 0px;

Codice: [Seleziona]

[font=verdana][size=78%]
[/font][/size]
[font=verdana][size=78%]Grazie Mille Come Sempre !!![/font][/size]

[adottauncane]

Io le barre di scorrimento le vedo, sia quella orizzontale sia quella verticale. Solo che quel disegno messo così non va bene comunque perché, se è vero che non si muove più mettendo scroll al posto di fixed in verticale, ti rimane il problema in orizzontale... Se chiudi la finestra si muove.

[imejopitbul84]

esatto, infatti se io su firebug faccio la prova di inserire questo codice vanno via le barre di scorrimento, ma ottengo che l'mmagine in background non mi si sposta e rimane allineata come dovrebbe ai contenuti... ora il codice lo inserisco nel css solo per la voce del menu immagine coordinata così ti faccio vedere il meglio il problema..



]background: url("http://www.ilpette.altervista.org/relecomunicazione/images/immagine-coordinata/immagine-coordinata.jpg") no-repeat scroll 50% 50%;
color: #46462B;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 1024px;
z-index: -9999;
font-family: CenturyGothic;
line-height: 1.3em;
min-height: 769px;
margin: 0 auto;
padding: 0px;


Grazie Mille

[adottauncane]

Ho visto. Rimango dell'idea che quel tipo di effetto non lo puoi ottenere inserendo il background in quel modo. Troppo incasinato da gestire. O inserisci un nuovo div che sia indipendente dagli altri e rimanga fisso o spezzetti l'immagine e cerchi (se possibile) di inserirla dei div che hai.

[imejopitbul84]

Ho fatto un pò di prove e togliendo il comando position: fixed, sembra che ho risolto l'unico inconveniente, cioè le barre di scorrimento ora funzionano.
Io apro il sito e riduco le dimensioni della finestra e appaiono le barre di scorrimento...
L'unica cosa che non sò è se è un effetto che ottengo solo sul mio Display da 17" oppure è funzionante anche ad altre risoluzioni...


(quella di aprire un nuovo div, sarebbe la soluzione migliore... questa soluzione la proverò su un'altra voce di menu, visto che ho installato/dupplicato il template e quindi ho css differenti ad ogni voce di menu su cui giochicchiare ;-), questa è una esercitazione sul come replicare o rifare etcc un sito ...un esercitazione per imparare.)




Vi stresserò ancora perchè sono curioso di sapere/imparare...e sono incuriosito sul come repplicare questo menu linkabile


Grazie di nuovo !!!