Impostare e posizionare piccola immagine di background

**danielepalmas88** · 26-10-2016, 16:35

Chiedo scusa per la banalità della domanda, ma mi servirebbe una mano a correggere il seguente codice.

Devo inserire in un certo punto della pagina una piccola immagine di sottofondo...e siccome ho necessità di dare coordinate, regolare la dimensione ecc, ho finito per fare un casino con il codice, che a sto punto non funziona...

Cosa ho sbagliato?

Codice PHP:


<style="background-image:url(http://miosito.com/img/immagine.jpg); background-repeat:no-repeat; background-size: 262px 329px; background-position: 35% 24%;">

Devo forse introdurre l'immagine con <img> o cos'altro?

**KillerWorm** · 26-10-2016, 18:17

Originariamente inviata da danielepalmas88

Help background img

[Mod]
Ti invito a (ri)leggere il regolamento di sezione (punto 3 o giù di lì)
Evitiamo titoli del genere, grazie!
Per questa volta ho corretto io.

Il tuo intento non è chiaro e ovviamente quel codice, scritto in quel modo, non ha senso.

Credo tu stia mischiando la funzione del tag <style> (che serve ad includere dei fogli di stile sulla pagina) con quella dell'omonimo attributo style (che serve a definire lo stile sullo specifico elemento su cui è applicato).

Potresti fornire maggiori dettagli per capire cosa vuoi ottenere esattamente?

**danielepalmas88** · 26-10-2016, 18:30

Chiedo scusa!

L'intento è usare quella background picture che sto cercando di impostare, come sottofondo di un'altra immagine.

Ogni post del mio blog ha una featured image impostata in un determinato punto.
Ed ora vorrei piazzare là dietro il presente mini-sottofondo.

Sono già riuscito a far un lavoro simile, ma in quel caso entrambe le immagini - principale e di sottofondo - si trovavano dentro una tabella. Stavolta non c'è tabella, e riciclando il codice vecchio che usavo là purtroppo non mi viene fuori nulla di funzionante.

Questo è il codice della mia attuale featured image:

<img align="left" style="margin-top: 5px;margin-bottom: 5px;margin-left: 3px;margin-right: 20px" src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'medium', true); echo $image_url[0]; ?>" width="206px;" height="300px;" alt=“bla bla bla" title="<?php the_title(); ?>">

Quello del post iniziale è invece quello che cerco di usare per impostare la cornice di sottofondo.

**KillerWorm** · 26-10-2016, 22:27

L'intento è usare quella background picture che sto cercando di impostare, come sottofondo di un'altra immagine.

Bene, allora puoi applicare il css a tale elemento <img>.

Il tuo codice css è comunque ridondante, potresti intanto usare delle forme abbreviate per raggruppare la definizione di più proprietà della stessa "famiglia".

Queste sono comunque nozioni basilari. Posso consigliarti di dare uno sguardo a qualche guida di base. Puoi iniziare a guardare tra i link utili css (discussione in evidenza). Tra il resto vedi anche il capitolo 6 dove puoi trovare informazioni utili per ottimizzare il codice.

Questo è come potrebbe essere riportato il css del tuo primo post:

codice:

background: url('http://miosito.com/img/immagine.jpg') no-repeat 35% 24% / 262px 329px;

che equivale a scrivere:

codice:

background-image:url(http://miosito.com/img/immagine.jpg);  background-repeat:no-repeat; background-size: 262px 329px;  background-position: 35% 24%;

Questo è l'altro:

codice:

margin: 5px 20px 5px 3px;

che equivale a scrivere:

codice:

margin-top: 5px; margin-bottom: 5px; margin-left: 3px; margin-right: 20px;

Un ulteriore consiglio è quello di evitare l'uso di attributi per la formattazione (come width e height).
Ttra l'altro, questo, è sintatticamente sbagliato:

codice:

width="206px;" height="300px;"

Anche se i browser riescono ad interpretarlo, i punto e virgola (

nei valori di questi attributi, non ci stanno a fare niente.

Ad ogni modo, in generale, è preferibile definire il tutto tramite css.

Anche l'attributo align può essere soppiantato, col css, dalla proprietà float.

Rielaborando ciò che hai postato, si potrebbe ottenere una cosa del genere:

codice:

<img  style="float: left; width: 206px; height: 300px; margin: 5px 20px 5px  3px; background: url(http://miosito.com/img/immagine.jpg) no-repeat 35%  24% / 262px 329px; " src="image.jpg" alt="..." title="...">

Un ultimo consiglio (puoi trovarlo su tutte le guide di web design, css e simili) è quello di evitare la definizione di css in linea (cioè direttamente su un elemento attraverso il suo attributo style, come in questo caso) ma preferire la definizione in un foglio di stile separato o dichiarato nell'head del documento.

Ad ogni modo, venendo al dunque, non capisco comunque come vuoi che sia definito quel background e perché vuoi definirlo per un elemento img.
Non è chiaro cosa vuoi realizzare. Se non mostri un esempio, una bozza, uno schizzo di cosa vuoi ottenere esattamente, è difficile darti consigli mirati.

**danielepalmas88** · 27-10-2016, 12:02

Post immenso. Davvero notevole. Ti ringrazio infinitamente.
A quanto pare ho tanto lavoro da fare, visto che tutti i miei siti utilizzano codice obsoleto, datato e riadattato. Non avendo della basi di studi, iniziai a creare siti utilizzando il semplice MS FrontPage... Ma a quanto pare la maggior parte del linguaggio utilizzato è ora superato. Non appena avrò qualche ora libera riaggiornerò tutti i miei siti.

Ho salvato nei preferiti il link che mi hai fornito, ed ho già cominciato a leggere qualcosa. Davvero interessante.

Per quanto concerne la mia domanda iniziale, premesso che utilizzo wordpress, ho un blog di recensioni di vari libri. Ogni post ha una sua featured image che è la copertina del libro.
E dunque l'idea attuale era, visto che ho trovato un'ottimo file png raffigurante la sagoma di sottofondo di un libro, accentrare la copertina davanti a tale background, in modo da farlo apparire come un libro completo.
Come detto prima, tale lavoro sono riuscito a farlo egregiamente all'interno di una tabella, ma poi esternamente ad essa sto facendo confusione col codice (ahimé anche per assenza di nozioni, purtroppo).

Il codice finale che mi hai fornito:

...mi offre solamente un sottile bordino di sottofondo. E' come se aggiungesse a malapena 2 millimetri di cornice all'immagine. Ma e' un po' pochino. Come mai l'immagine di sottofondo non compare per intero? Colpa dei margin top, bottom, left e right della copertina forse? In tal caso si potrebbe aggiungere un attributo transparent per i margin?

Grazie di tutto. Mi hai insegnato davvero tanto con un unico post!

**KillerWorm** · 28-10-2016, 08:29

Post immenso. Davvero notevole. Ti ringrazio infinitamente.

Non c'è di che.

A quanto pare ho tanto lavoro da fare, visto che tutti i miei siti utilizzano codice obsoleto, datato e riadattato. Non avendo della basi di studi, iniziai a creare siti utilizzando il semplice MS FrontPage... Ma a quanto pare la maggior parte del linguaggio utilizzato è ora superato. Non appena avrò qualche ora libera riaggiornerò tutti i miei siti.

Buon lavoro allora

Ho salvato nei preferiti il link che mi hai fornito, ed ho già cominciato a leggere qualcosa. Davvero interessante.

Bene. Dato che ti mancano dei fondamenti, posso giusto consigliarti di iniziare da una o due guide di base che puoi trovare nei primi capitoli dei link utili, in modo da avere chiari i meccanismi di funzionamento dei fogli di stile. Questo ti permetterà di capire meglio come poterti giostrare in varie situazioni, come quella presente.

Per quanto concerne la mia domanda iniziale, premesso che utilizzo wordpress, ho un blog di recensioni di vari libri. Ogni post ha una sua featured image che è la copertina del libro.
E dunque l'idea attuale era, visto che ho trovato un'ottimo file png raffigurante la sagoma di sottofondo di un libro, accentrare la copertina davanti a tale background, in modo da farlo apparire come un libro completo.
Come detto prima, tale lavoro sono riuscito a farlo egregiamente all'interno di una tabella, ma poi esternamente ad essa sto facendo confusione col codice (ahimé anche per assenza di nozioni, purtroppo).

Capito.

Il codice finale che mi hai fornito:

...mi offre solamente un sottile bordino di sottofondo. E' come se aggiungesse a malapena 2 millimetri di cornice all'immagine. Ma e' un po' pochino. Come mai l'immagine di sottofondo non compare per intero? Colpa dei margin top, bottom, left e right della copertina forse? In tal caso si potrebbe aggiungere un attributo transparent per i margin?

Chiaro, il background è delimitato all'interno dell'effettivo ingombro dell'elemento a cui questo è applicato.
Teoricamente non dovresti nemmeno vedere quei "2 millimetri di cornice", che forse sono causati da altre regole.

Ad ogni modo potresti risolvere applicando un padding all'elemento <img>. Questo fa in modo di creare un "cuscinetto" (una cornice) attorno al contenuto dell'elemento (cioè attorno all'immagine contenuta nell'elemento <img>) e, di fatto, estende l'ingombro stesso di quell'elemento; a differenza invece del margin che definisce uno spazio attorno all'elemento.
Il background sarà quindi esteso e visibile nel padding ma non nel margin.

Fai qualche prova.

Può essere utile vedere qualcosa riferito al "box model". Trovi queste informazioni sulle guide o, comunque, tra i link utili.

Grazie di tutto. Mi hai insegnato davvero tanto con un unico post!

Figurati. Mi fa piacere essere stato d'aiuto

**danielepalmas88** · 28-10-2016, 10:47

Grazie ancora ^_^

Padding mi ha leggermente ampliato la cornice, ma oltre ad essere ancora troppo poco visibile, viene pure mal allineata.

Ma è proprio obbligatorio abbinare il background a tale immagine anziché fare le due cose separatamente come era il mio intento iniziale?
La copertina si trova nello stesso identico punto su ogni post, quindi non avrei problemi ad utilizzare una coordinata specifica per il sottofondo, visto che andrebbe comunque a coprire la zona desiderata su tutti i post.

E tale background lo vorrei provare ad inserire nel file single.php appunto... (a meno che non sia più indicato includerlo nello style.css, non saprei...)

Qualcosa del tipo:

...funzionerebbe?

**KillerWorm** · 28-10-2016, 17:09

Ma è proprio obbligatorio abbinare il background a tale immagine anziché fare le due cose separatamente come era il mio intento iniziale?

Sinceramente non ho capito il tuo intento iniziale ma è certo che puoi applicare il css su un qualsiasi elemento del DOM.

E tale background lo vorrei provare ad inserire nel file single.php appunto... (a meno che non sia più indicato includerlo nello style.css, non saprei...)

Non so, vedi tu come meglio impostare la cosa.

codice:

<background style="url: (http://miosito.com/img/immagine.jpg) no-repeat 35% 24% / 262px 329px;">

...funzionerebbe?

Questo chiaramente non ha molto senso. Non esiste un elemento html identificabile col tag <background>.

Come già detto, il css puoi applicarlo agli elementi del DOM (cioè ai tag html). Questi devono chiaramente essere degli elementi validi.

Se vuoi impostare il background sotto un elemento <img> puoi fare in vari modi. Uno è quello già esposto, applicando il background direttamente sull'elemento <img>, facendo tutte le dovute considerazioni.

Un altro modo è quello di applicarlo ad un elemento contenitore, in cui è presente l'elemento <img>; che sia un div, un elemento table, un paragrafo o il body stesso della pagina, deve comunque essere un elemento valido del DOM.

Ancora, puoi applicarlo ad un elemento, come un <div>, che andrai a posizionare al di sotto dell'elemento <img>, impostandolo opportunamente con position, z-index, e altre relative proprietà.

Inutile dire che sono tutti concetti di base che puoi trovare su qualche guida, come già detto.

Come già detto, dal momento che non stai fornendo un esempio esplicito di cosa vuoi creare e della situazione che hai e che devi adattare, non è possibile consigliarti delle soluzioni mirate e specifiche. Il codice che hai postato non è sufficiente a capire quale risultato vuoi ottenere di preciso. Personalmente posso quindi darti solo dei consigli generici.

**danielepalmas88** · 28-10-2016, 17:46

Okay allora riprovo il lavoro usando una tabella, così non avrò i limiti del sottofondo ridotto a piccolo bordo.

Ho elaborato quest'altro codice...che però mi dà due problemi:

1 - Anziché avere il testo con la recensione del libro a fianco, a destra dell'immagine, il testo va invece tutto a capo sotto la tabella. Evidentemente ho impostato male il parametro margin della tabella (ammesso che si possa impostare come lo era precedentemente nell'immagine da sola)

2 - Le coordinate di posizione dell'immagine di copertina del libro, pur essendo inserite dentro il riquadro della tabella, risultano relative all'intera pagina web. Si può modificare il codice per farle risultare a 5% di distanza dal top della tabella e 9% dalla sinistra della tabella, piuttosto che della pagina?

(3- Posso chiudere il tutto con /> oppure con > è identico? Dato che il tag <img> non richiede tag di chiusura mi chiedevo se il /> fosse appunto più indicato per questi casi o meno)

**KillerWorm** · 28-10-2016, 18:56

Okay allora riprovo il lavoro usando una tabella,

Perché non un semplice div?
Se conti di usare la tabella solo perché vuoi applicare del css, non credo sia una buona soluzione.

1 - Anziché avere il testo con la recensione del libro a fianco all'immagine, il testo va invece tutto a capo sotto la tabella. Evidentemente ho impostato male il parametro margin della tabella (ammesso che si possa impostare come lo era precedentemente nell'immagine da sola)

Non riesco a riprodurre il problema che stai descrivendo. Impossibile capire come aiutarti.

2 - Le coordinate di posizione dell'immagine di copertina del libro, pur essendo inserite dentro il riquadro della tabella, risultano relative all'intera pagina web. Si può modificare il codice per farle risultare a 5% di distanza dal top della tabella e 9% dalla sinistra della tabella, piuttosto che della pagina?

Nozione di base che puoi apprendere dando uno sguardo a qualche guida riguardo l'argomento "position". Tra i link utili trovi vari riferimenti sull'argomento, al capitolo 2.

Questo comportamento infatti è dato dal position:absolute che è comunque relativo al genitore più prossimo che non abbia position:static (valore di default per tutti gli elementi); non trovando alcun genitore con un valore differente, il riferimento risulterà relativo al body.
Per ottenere un position:absolute che faccia riferimento all'elemento padre, puoi impostare position:relative sul padre.

3- Posso chiudere il tutto con /> oppure con > è identico? Dato che il tag <img> non richiede tag di chiusura mi chiedevo se il /> fosse appunto più indicato per questi casi o meno

Nozione di base riguardo lo sviluppo di markup (X)HTML. Se parliamo di XHTML è obbligatorio chiudere i cosiddetti "tag vuoti", mentre in HTML è a tua discrezione. Sul relativo forum XHTML e HTML puoi trovare delle guide tra i link utili. Sicuramente troverai queste e altre informazioni.

Ribadisco il consiglio di studiare qualche guida di base, oltre all'esercizio pratico, così da apprendere meglio queste nozioni fondamentali che ritroverai spesso in svariate situazioni lavorando nell'ambito dello sviluppo web.

Capisco che ci sono molte lacune e per questo ti viene difficile valutare opportunamente il procedimento da adottare per raggiungere l'obiettivo. Per cui, ripeto per la terza e ultima volta, poi non lo ripeto più: se puoi postare una bozza, uno schizzo o un esempio dove poter vedere il risultato che vuoi ottenere, oltre ad un codice più completo della situazione che hai, sarà più semplice per te ottenere aiuto; diversamente si può parlare di tutto e di niente senza che si riesca ad arrivare al dunque.

Nel caso, può essere utile postare, se ti è possibile, anche un link ad un'eventuale pagina pubblica dove si può visionare il tuo progetto, o quantomeno, ciò che è in riferimento all'oggetto di questa discussione.

Discussione: Impostare e posizionare piccola immagine di background

Strumenti discussione

Ricerca discussione

Visualizza

Impostare e posizionare piccola immagine di background

Permessi di invio