Can't set png image through css content property in Symfony project - css

My png image is located in src/AppBundle/Resources/public/img
I am trying to set png image through css content property:
content: url(../../public/assets/img/optional-checked.png);
But I am getting
GET http://127.0.0.1:8080/public/assets/img/optional-checked.png 404 (Not Found)
How can I set png image through CSS content property in Symfony project?

First suggestion, That's because you need to respect the hierarchy from where you call your CSS not your script.
Another suggestion would be not to use public folder to upload your assets, instead of this, use web folder (in the root), because if you do like I'm saying then the twig views can use properly asset keyword right.
And the last tip, is that you are trying to read your image from public/assets/img/optional-checked.png when you said that your image is really located in public/img.
Hope this helps.

Related

Unable to add bgimage in CSS

The below is my piece of code, I am not able to add background-image in my web page, can anyone tell me where I am going wrong?
enter image description here
Create folder called 'images' near your class_id.html file are located and Copy "Aravind_Signature.jpg" image to the newly created image folder
and then change the css background-image property as below
background-image:url("images/Aravind_Signature.jpg");
Note : its bad approach for referring image files path starting from drive names like "c:\". Because when you share your code you need change image path always.
There is nothing wrong, you just need to look at referring to path this way...
either use '/' or '\' so that you will get the right path.

Linking BootsFaces BrandImg

I'm new to JSF and can't figure out how to add the link for my image in my Navbar for Bootsfaces.
<b:container>
<b:navBar brandImg="WHAT_DO_I_PUT_HERE?"
id="navbar-main"
inverse="false"
sticky="true"
I've looked everywhere to try and figure out how to link the image inside of BrandImg and there isn't any information that I can find. I have my logo.png file stored in my resources -> images folder.
The brandImg is simply the URL of the image to display. It may be relative or absolute.
Currently, there's no support for images stored in the resources folder. Of course, you can always use an URL like "#{request.contextPath}/resources/images/logo.png".

Background image path during web based development

I'm Playing around with a cloud based front end developer called Jetstrap and Divshot. A bit confused as to how I'm suppose to code the PATH for css "background image" when using a web based software like this. Where do I store the image and how do I call it? I would like to preview the background image as I develop before export.
Since I cannot find any upload function on both site, I guess you can only assign an image that they can access that image via network.
You can do it as follows:
Click on an element.
Assign that element a class.
Click the 'Edit CSS' or 'CSS/HTML' at right-bottom.
Write the css rule for the class assigned at Step 2.
Screen Shots:
At the moment Divshot only supports external images. We plan to offer image uploading in the near future. I recommend using the Public folder or a shareable link on Dropbox to host your website assets for now. Copy the public link for the background image and use it as your background image path in the CSS editor:

How to use images for skins without embedding them in the external style sheet

I'm trying to create a run time css-based swf which DOES NOT have embedded images, but rather picks them up from the file system.
For example,my Current .css file has this piece of code:
.paySeatBundleAvailable {
upSkin: Embed("../images/common/pay_seat_bundle_available.gif");
overSkin: Embed("../images/common/pay_seat_bundle_available.gif");
downSkin: Embed("../images/common/pay_seat_bundle_available.gif");
}
I dont want the CSS based SWF to have all the images embedded as I have a lot of images. Rather I want the images to be loaded at runtime from the path specified.
I tried using 'Url' in place of 'Embed' , but it throws 'error #1034 type coercion' error.
Help Please!! What is the correct approach?
Create a general skin that does all states (up, over, down, etc) which only has one Image Object. Set the source of that Image object to the appropriate strings and the Image will then do an http call to that image automatically without embedding anything.

Can't view image from webroot in CakePHP

I am trying to display an image from the /webroot/img/ folder using the following CSS syntax: .template-mainbg{background:#B8D9EA url('../img/bg_top.png') repeat-x left top;}
The image never loads and if I try http://site.com/img/bg_top.png it gives me a Missing Img controller error.
This very wierd since the default Cake icon loads perfectly. Both from CSS and direct link.
What could be the problem?
Thank you!
EDIT I solved this problem. Unfortunately I spent 2 hours to figure out that Dreamweaver didn't sync the image with the remote server. Thank you anyway for all your help!
paths are relative to the CSS document, so it depends where the CSS file is being served from.
In the above example, ../img/bg_top.png your CSS file would need to be in the site root I believe.
The image never loads and if I try http://site.com/img/bg_top.png it gives me a Missing Img controller error.
my understanding is that you can't access anything from "above" the webroot from a browser, hence the message.

Resources