Image on Header (on SIMPLE THEME)

Highlighted
New Member
4 0 0

ENGLISH
Hi, I´m using theme SIMPLE in my Shopify store, and I would like to know how can I add an image on the header of the website. Also, I need this image it will be responsive in order to use in other devices like Cellphone or tablet.

You can see more details in the attached file.

 

I was able to put an image as background with custom code. My problem is I can't set the image as responsive, so in desktop version the image looks great, but in mobile version the image has the same size than desktop, so looks awful


Please let me know if you need more info from my side
Thanks in advance

 

ESPAÑOL
Hola,
Estoy usando el tema SIMPLE para mi tienda, y me gustaría saber cómo puedo agregar una imagen en el Header de la página. Además, necesito que esta imagen sea responsiva para que pueda ser usada en un Celular o Tablet.

dejo un adjunto más abajo con la imagen para explicar lo que necesito.

 

Logré poner una imagen de fondo del header usando código personalizado, pero el problema es que no logré que fuera responsiva, por lo cual en el celular y tablet la imagen se veía del mismo tamaño que en la versión de escritorio (muy grande).

 

Muchas gracias a todos

 

Roberto Celis Q.
rcelisquiroga@hotmail.com

 

Header SIMPLE THEME.png

0 Likes

Hello ,

Can you please share site URL. so i can check the issue.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
1 Like
New Member
4 0 0

Sure, here is: www.todolimpio.cl

 

 

Thanks a lot

Roberto 

0 Likes

Hello Robertoshopify,
Please add this code at the bottom on theme -> edit code -> assets -> theme.scss.liquid

.site-header.grid.medium-up--grid--table {
	background-image: url(https://cdn.pixabay.com/photo/2017/03/02/08/58/background-texture-2110724__340.jpg);
	background-repeat: repeat;
	background-position: 100% 100%;
}

Note: Use your image URL in place of image url which i have used in this code.

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
New Member
4 0 0

Thanks a lot, but it doesn't work. As you can see in the attached screen print, the website lose all their configuration, layout and sizes.

I had to remove the code of my website in order to preserve my website correctly.

 

Thanks again

 

Imagen1.png

 

Imagen2.png

 

Imagen3.png

 

0 Likes