1

Bueno como dice el titulo necesito añadir una imagen svg al fondo de un div. La imagen he de añadirla por css si o si.

css

.catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 50px;
   text-decoration: none;
   background-image: url("image.svg");
   width:100%;
   height: 100%;
}

html

 <div class="div-btn" >
   <a style="color:'.$color.'; border-color:'.$color.';" class="btn-pdf" href="'.$tipo_catalogo["pdf"]["url"].'">DESCARGAR</a>
</div>
10
  • ¿Podrías ponernos algo del código con el que estás tratando de poner la imagen de fondo? El HTML del div y el CSS que tratas de aplicar estaría bien para empezar.
    – phpMyGuel
    Commented el 2 oct. 2018 a las 10:48
  • @PHPMyguel listo, el svg debe ir al lado de DESCARGAR, el svg es el icono de pdf
    – Caldeiro
    Commented el 2 oct. 2018 a las 10:57
  • No me queda claro una cosa. ¿Quieres la imagen de background o que salga al lado de la palabra "DESCARGAR"? Porque de ser lo segundo ya tendrías que añadir una etiqueta <img> y no un background-image
    – phpMyGuel
    Commented el 2 oct. 2018 a las 11:04
  • los botones de descarga cambian de color, el svg que añadde debe poder cambiar de color. Con img se puede hacer eso?
    – Caldeiro
    Commented el 2 oct. 2018 a las 11:07
  • No que yo sepa, pero podrías tener dos svgs ,uno de cada color y cambiarlo según tu necesidad. ¿En que circunstancia tendría que cambiar el color? ¿Al hacer click en algún lado? ¿Al pasar el ratón por encima?
    – phpMyGuel
    Commented el 2 oct. 2018 a las 11:11

3 respuestas 3

2

A mí me resulta esto:

.catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans";
   background-color: rgb(255, 255, 255);
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("https://image.flaticon.com/icons/svg/337/337946.svg");
   background-size: 30px;
   background-position: 0 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
<div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

No será problema de la ruta relativa de la imagen? Tal vez debieras probar poniendo la ruta absoluta respecto de tu dominio.

4
  • estoy usando wordpress, pero el svg no lo puedo subir a la biblioteca de medios por seguridad
    – Caldeiro
    Commented el 2 oct. 2018 a las 11:11
  • tu solucion me ha ayudado bastante
    – Caldeiro
    Commented el 2 oct. 2018 a las 11:28
  • Wordpress no permite SVGs porque si permites que otros usuarios suban SVGs, o tú subes uno sin revisarlo, éstos pueden contener javascript y ejecutarse sin más. Lee el artículo svg-in-wordpress. Por si acaso, exixse el plugin Safe SVG que permite subir SVGs y de paso los sanitiza. Pero quién sabe si esa sanitización es realmente a prueba de balas
    – ffflabs
    Commented el 3 oct. 2018 a las 14:03
  • Buenas al ginal lo subi por ftp al servidor directamente
    – Caldeiro
    Commented el 4 oct. 2018 a las 7:35
1

Otra alternativa es utilizar svg como data uri:

.catalogo-gallery .btn-pdf
{
   font-size: 17px;
   font-weight: 800;
   font-family: "Open Sans"; 
   border-style: solid;
   border-width: 2px;
   padding: 12px 40px;
   text-decoration: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' %3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E");
   background-size: 30px;
   background-position: 2px 8px;
   background-repeat: no-repeat;
   width:100%;
   height: 100%;
}
<div class="catalogo-gallery">
  <a href="#" class="btn-pdf">Descargar PDF</a>
</div>

Lea más acerca de SVG como data:uri

1

Por un lado: Puedes añadir una declaración al functions.php de tu tema en wordpress para que te permita subir svg a medios:

/*************************************************************************************************************************************
    Funcionalidad del tema > Añadir svg a media upload
*************************************************************************************************************************************/

function svg_myme_types($mime_types){
    $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension
    return $mime_types;
}
add_filter('upload_mimes', 'svg_myme_types', 1, 1);

Además de eso, puedes poner las imágenes en una carpeta images dentro de tu tema o tu child-theme, que es desde donde las buscará el css (sin que haga falta añadir más ruta que el nombre de la carpeta).

En este caso:

background-image: url("images/image.svg");

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.