How to upload an image to use in my CSS?

[arron]

I just want to be able to upload an image to use in my CSS for a background,
I tried creating a template, and uploading a file, then using:

.mobileheader {

Code: Select all

 background-image: url('images/header.png');  
 background-size: 100% 100%; 

}

but the image does not show up.

[Evgene Karachevtsev]

Hello Arron,

Please try the following:
prebackground: url("files/views/assets/image/FILE_NAME.png");/pre

[arron]

thank you for the reply, tho this didn't work for me, i tried a few variations also...

background: url("files/views/assets/image/FILE_NAME.png");
background: url("files/views/assets/images/FILE_NAME.png");

background: url("files/views/assets/image/FILE_NAME.png");
background-image: url("files/views/assets/images/FILE_NAME.png");

none of these loaded my image uploaded to my template, (yes i swaped out FILE_NAME.png with my files name)

[Yurii Orishchuk]

Hi Arron,

Please follow this solution:

1. Open your project "media manager" and upload needed image.
   Details: http://prntscr.com/5esala/direct

2. Add following CSS code to your CSS asset:

   pre

   /* this will apply background to header, just to test */
   html body .ui-header[data-role="header"] {

   /* where a_01.jpeg is your uploaded in 1st step image name */
   background: url(../../../../files/views/assets/image/a_01.jpeg) no-repeat;

   background-size: cover;
   }

   /pre

   That's all.

   Please note: your problem could be also in weaker CSS rule you use. To test it you need open browser debugger and find your HTML element and search applied styles.

   Regards.