How to address images in CSS ?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
hallo, i would like to create several CSS type DIV objects with image background:
if i write :

div style="background-color:#0000ff;" > etc...
- then here the background works fine
but if i want to have the image background, i tried this (info.png image file is uploaded directly in the file manager, no subfolder):
div style="background-image:url("/resources/info.png");" > etc...
but there is no background...

is there any way how to adress images properly ?
thank you very much

Radovan
Photo of Radovan Judoka

Radovan Judoka

  • 4 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Radovan

Here's how you can add your image as your background:

<div style="border: 2px solid red; width: 400px; height: 80px; background-image:url(http://mysitename.yolasite.com/resour... is where your text goes</div>

Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

* Width is how wide the area will be.
* Height is how tall it will be.
* Border is how thick it will be should you choose to have one, and after that you put the color of the border in this case solid red.
* Background-image is the path name of your file. The path to your files would be: http://mysitename.yolasite.com/resour...

Where:

>"http://mysitename.yolasite.com" is the URL of your site.
>"resources" is the name of the File Manager (you must not change that).
>"folder" - if your file is in a folder, include the folder name.
>"file.jpg" is the name of your file.

* Please ensure that the path name is identical to the one in the File Manager in terms of upper and lower-case letters, dots, dashes etc.
* You can put the text you wish to appear where you see: "This is where your text goes".
* Click OK.

Please let me know if you have any trouble with this.
Photo of Radovan Judoka

Radovan Judoka

  • 4 Posts
  • 0 Reply Likes
Hello Sanja, thank you very much for your reply. Your code works but only for the images, that have been previously published on the page.
If the image is only recently uploaded to the file manager and the page was not republished menawhile, than it is not working.
But i am in the middle of redesigning process - changing theme, banner, layout...and everything so i can not publish the page now, because it is not finished yet...but for the testing purposes i need to see the background image of the DIV object...

Thank you, Radovan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Radovan

Unfortunately, you will need to update your site to cache your images in your File Manager and then you will find they will work. I know you don't want to publicized your changes at this point, but sadly, there is no other alternative I can think of.

For next time, I do suggest that you first upload your images - then update your site. This way, no new changes have been made to your site other than adding files to your File Manager. Then, you can go about editing your site as you like. When you're ready to publish your changes, then you can click on the update button again.