poner el background image mas ancho

[jiten]

Amigos mi background image tiene un tamaño real de 720 px, quiero usarlo como sublinea de un titulo... pero el problema es que nose muestra en su total ancho, sino que se corta según el ancho del nombre del título... como hago para que siempre se muestre del tamaño que realmente es ?


#titlewithline{
font-size:14px;
color:#588C9B;
background-image:url(../images/title_baseline.png);
background-repeat:no-repeat;
width: 720px;
border-width:720px;
height:130px;
padding: 7px 0px 20px 39px;
}

[pzin]

Tienes puesto que no se repita el fondo, así que sólo se mostrará una vez. Cambia "no-repeat" por repeat-y o repeat-x, según convenga. Si el ancho que necesitas fuese más del indicado en width, entonces width debe de ocupar lo que quieras que ocupe o al 100%. Pero supongo que el problema realmente es lo de no-repeat.

[jiten]

nada.... no funciona...

[furoya]

Hola jiten, Bonez.

jiten : si pusieras un código completo que podamos probar, una ruta de imagen absoluta que podamos ver, y una descripción un poco más esmerada sobre lo que "no funciona ... nada" sería mucho más fácil ayudarte.
Digo, si no te jode.

Para empezar, si tu imagen de "subrrayado" tiene ancho fijo, le ponés a la caja que la usa de fondo el mismo ancho.
O en vez de meterla de fondo, la ponés adentro de la caja, simplemente como imagen para que el contenedor tome su ancho.

[javiandgo]

Iniciado por jiten

Amigos mi background image tiene un tamaño real de 720 px, quiero usarlo como sublinea de un titulo... pero el problema es que nose muestra en su total ancho, sino que se corta según el ancho del nombre del título... como hago para que siempre se muestre del tamaño que realmente es ?


#titlewithline{
font-size:14px;
color:#588C9B;
background-image:url(../images/title_baseline.png);
background-repeat:no-repeat;
width: 720px;
border-width:720px; (y como para que esto??? estas cortando 720px de borde por todos lados a tu elemento, sin contar que no esta definidas las otras propiedades)
height:130px;
padding: 7px 0px 20px 39px;
Agrega Display:block;
}

[furoya]

Justamente ahí estaba el drama. Ése no es el código que debía postear.
Debe ser alguna prueba, por eso tiene mil errores que en una página no van a pasar. (Hasta me parece que intentó reemplazar la imagen por un borde.)

Si tiene ancho declarado, ya es un elemento de bloque y no hay que agregárselo al display; si es un elemento inline, el ancho no le hace diferencia. Pero se supone que esto ya lo debe saber.
Aunque quizá tenga la combinación inline-block en otro lado.

Vamos a esperar a que ponga un ejemplo completo, que podamos ver. De otra forma, estamos adivinando.

[jiten]

#titlewithline
{
font-size:14px;
color:#588C9B;
background-image:url(../images/title_baseline.png);
width:720px;
background-repeat:repeat-x;
height:130px;
padding: 7px 0px 20px 39px;
}

<span id="titlewithline">TITULO DE PRUEBA</span>

Ok, se supone que debería darme un resultado así :



> TITULO DE PRUEBA
__________________________________________________ ____________________



Pero me da así:


> TITULO DE PRUEBA
_________________



Donde la imagen es similar a esta:

>
__________________________________________________ ______________________

[mariogl84]

Creo que la solución es la que ya te propuso javiandgo más arriba: añade display:block. Si el elemento es tipo inline da igual el width que le pongas, su ancho va a ser el ancho de su contenido.

[pzin]

Iniciado por furoya

Si tiene ancho declarado, ya es un elemento de bloque y no hay que agregárselo al display; si es un elemento inline, el ancho no le hace diferencia. Pero se supone que esto ya lo debe saber.

Por poco logras que pierda la cordura. Demasiado sutil.

[jiten]

Iniciado por mariogl84

Creo que la solución es la que ya te propuso javiandgo más arriba: añade display:block. Si el elemento es tipo inline da igual el width que le pongas, su ancho va a ser el ancho de su contenido.

Gracias ! funcionó :

Con

display:block;
background-repeat:no-repeat;


Muchas gracias !

[furoya]

Iniciado por Bonez

Por poco logras que pierda la cordura. Demasiado sutil.

Es que si le respondo como debo, capaz que me echan.

···

Bueno, se acabó la sutileza.

jiten : aprendé CSS. Y ya que estamos, también HTML.

Lo que escribiste es una burrada atómica. Repito por enésima vez : acá viene gente a aprender, y no podemos dejarle ese código como ejemplo. Y en realidad tampoco esa "solución".

Si estás usando un span, es un elemento inline. Eso significa que te va a ignorar la declaración del width:720px, porque toman el ancho del contenido.
Los elementos de bloque sí reconocen anchos, por eso javiandgo te recomendó convertir a display:block ... sin confirmar que estabas usando un span.
Porque si estabas usando un div no lo necesitabas, y el problema hubiese sido otro.

Código:

<div style="background-repeat: repeat-x; background-position: left bottom; 
background-image:url(http://imageshack.us/a/img16/2408/semitrans017oh.png); 
font-size:30px; padding-bottom: 10px; width: 720px; ">
> TITULO DE PRUEBA </div>

Lo que comenté sobre el experimento de usar un borde a modo de subrayado tambien funciona con un div (o párrafo o cualquier elemento de bloque).

Código:

<div style="width: 720px; border-width: 0 0 2px; border-style: solid; 
border-color: blue; ">
> TITULO DE PRUEBA </div>

Y resulta que también anda en elementos en linea, pero como expliqué antes, solamente va a llegar hasta el ancho del contenido.

Código:

<span style="width: 720px; border-width: 0 0 2px; border-style: solid; 
border-color: blue; ">
> TITULO DE PRUEBA </span>

Para que funcione en un span (o cualquier elemento inline) está el truco que mencioné sobre meter la imágen (con su tamaño) adentro del contenedor.

Código:

<span>> TITULO DE PRUEBA <br><img 
src="http://imageshack.us/a/img16/2408/semitrans017oh.png" 
width=720 height=2></span>

Solamente quiero agregar algo: no tengo idea de por qué no mostrás la imagen, o una captura o imagen simulada de lo que querés hacer, pero ese esquema hecho con caracteres se entiende muy bien.
Después de ver eso me decidí a hacer estos ejemplos para dejar en tu post, y no vine solamente a "recordarles" que tienen que preguntar (y responder) correctamente.

[javiandgo]

Toda la razón futoya no tuve en cuenta si era un elemento en bloque o inline. De cualquier forma si era elemento en bloque display:block solo confirma lo que es (cierto, no hace falta el display cuando se tiene el alto y/o ancho definidos) y si era inline lo cambiaría a bloque.

Por otro lado no entiendo como jiten emplea un span para un titulo teniendo 6 headings, que sería lo correcto.

[furoya]

Je.
Vaya uno a saber si es un título. Confiemos en que usó un texto cualquiera de relleno, y que no es un veradero y semántico header.

Como estuve un mes de "licencia" supongo que nadie más estuvo presionando en mi lugar para que postearan correctamente (¿o sí?). Y ya se acostumbraron a venir a pedir cualquier cosa sin mostrar el código completo. Así también sabríamos realmente si lo está poniendo como título.

(Voy a tener que empezar a ponerme al día, hasta que me echen de nuevo ...)

[jiten]

Furoya, tu conocimiento técnico es muy bueno, tu conocimiento de relaciones interpersonales una pobre shit. Aprende a ser un poco mas humilde, aqui la gente viene a compartir cuando sabe y aprender cuando no. No necesitamos estúpidas reacciones egóicas ni comentarios sarcásticos.

Saludos y gracias a todos.

[furoya]

De nada, jiten, de nada.

¿Por qué seguís posteando basura en vez de aportar algo, y así reivindicarte de una vez en el tema?.

Tu opinión sobre mi persona carece de importancia para todos (especialmente para mí), y en vez de venir a llorar tendrías que haber publicado al fin el código original seguido de la corrección. Líneas sueltas que no sabemos ni cómo ni dónde pusiste no aportan nada.
Pero claro, la gente como vos no es capaz de entender que a este Foro hay que venir a colaborar, y por lo tanto da por hecho que estamos nada más que para resolver (y hasta adivinar) sus problemas, que la mayoría de las veces no es más que su ignorancia, porque no son capaces de abrir un manual antes de venir a postear cualquier cosa.

Y te aseguro que más allá de hacer sonreir un poco con alguna de mis ironías (hay que tratar de levantar el nivel del tema de alguna forma), esos textos que hago tampoco deberían estar en el Foro, pero siempre son preferibles a los tuyos. A nadie le gusta tener que tragarse mensajes lastimeros como el anterior, por no hablar de planteos lamentables como hiciste en el primero.

Con leer un libro de HTML y CSS nos hubieses ahorrado el tema. Porque el que haya puesto un mensaje a modo de tutorial y ejemplo no es precisamente mérito tuyo. Por no mencionar el resto de las colaboraciones que trataron de salvar tu post.

Alguien que no sabe cómo portarse en un foro, tampoco me va a enseñar a mí cómo debo comportarme.

Aprendé a ser un poco más humilde.



[edit]

Disculpame, jiten. Recién abro el Panel y veo tu "-1".

Me faltó agregar que sos un reverendo desubicado.

Si no te llenaron de "-1" a vos ¿por qué me lo vas a poner a mí?.

[/edit]


[edit]

¿Otra vez?

¿Era necesario caer tan bajo?

Iniciado por jiten

Valoración negativa en poner el background... por jiten que comentó 'Porque idiotas como tú deben aprender por las buenas o por las rectas' el 17/10/2012 a las 13:30

Por eso no queremos lacra como vos en estos Foros.

[/edit]