I'm having a problem where I have a background image that will show up perfectly fine when I'm using it in dreamweaver, but once I upload my site and the CSS files and everything it won't show.
Here's my CSS code:
.ELSsubbg {
background-image: url('../images/NTG_images.jpg');
background-repeat:no-repeat;
background-position:top left;
}
Any help would be great.
Because you are using a relative path in your CSS, where the stylesheet is looking for the image may be different than where you are seeing it when you go to it directly in the browser.
Try using an absolute path to your images directory instead of a relative one. Assuming you can see the image in your browser at http://www.website-name.com/images/NTG_images.jpg try removing the dots to make the path absolute from the root of your website.
background-image: url('/images/NTG_images.jpg');
Have you uploaded the image? Have you uploaded it to the right place? Is the CSS looking for it where you think it should be?
The easiest way to answer these questions is to use the browser's developer tools (eg Firebug) to watch the network traffic your page generates. Look for the request where it tries to load the graphic. Is it giving a 404 error? Probably.
If you are getting a 404, look at the URL it's calling to find out why. The answer should become clear.
Related
So my client insists I have to link the logo and images through a CSS sheet, But the site isn't live or uploaded so how will the website see the linked objects like this.
Example:
background: url("https://mysamplesite/assets/image/header/bullet_mobile_subsmenu.png") left center no-repeat;
Logic tells me that it needs to read:
background: url("image/header/bullet_mobile_subsmenu.png") left center no-repeat;
But it isn't a URL, is it? what should it say instead of URL?
I know it sounds novicey... I am a novice, I do what I do and if it isn't broken I do it again and again.
Thanks all.
It is a relative URL, which guides the browser on reaching the file relative to the current location.
If you set it inside a CSS file, make sure the path you mention is relative to the source of the CSS file and not relative to the document (as suggested here).
I'm currently making a website in PHP. When developing it I use xampp (localhost), and the pictures are visible.
<div data-bs-parallax-bg="true" style="height:500px;background-image:url("assets/img/mypicture.jpg");background-position:center;background-size:cover;">
When I wanted to upload to web server the pictures are invisible.
I tried these options but still not working.
style="height:500px;background-image:url('assets/img/mypicture.jpg');
style="height:500px;background-image:url('./assets/img/mypicture.jpg');
style="height:500px;background-image:url('../assets/img/mypicture.jpg');
style="height:500px;background-image:url('https:/example.com/assets/img/mypicture.jpg');
and the same with only background:url();
Thanks in advance!
Remove the quotes (single, double).
background-image: url(assets/img/mypicture.jpg);
Also, be careful when using relative paths here. Check this question too:
Using relative URL in CSS file, what location is it relative to?
Hi this way i give my image path in css. it works some time but not all the time.my site may have many sub folder and then the below path may not works. so i want to specify path in my css in such a way where ever i am on my site pages or whatever pages i will looking at but image show display on page. so tell me what trick i should apply in my css for specifying which works same way for all the pages. thanks
.labeltag {
background-image: url(../images/arrowbackground.png);
margin:2px;
border-radius:5px;
}
Try finding the image from the root of your site instead:
.labeltag{background-image:url('/images/arrowbackground.png');}
Assuming 'images' is a folder in your root directory
edit: I understand code can be more readable (regarding the suggested edit), but there is a reason I type it like this - it's better performance.
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.