okay, i have no idea why this isn't working at all. it seems like my code is the way it should be, can someone show me why my background image isn't showing correctly?
http://imgur.com/V6X4u
body {
font-family:arial;
font-size:14px;
background-image:url('worn_dots.png');
background-repeat:repeat;
}
For some reason, when I replace the URL with a web address, the background shows, but like this it doesn't.
Your Background image is forbidden see this, its working
DEMO
EDITED:
According to your screen shot your css is inside in css folder, so path your image in css like this:
background-image:url(../worn_dots.png)
As your image is present at root folder and css is prenst in css folder, so use ../ to relate your image in css
you should call the like mentioned below code:-
body {
font-family:arial;
font-size:14px;
background:url('http://i.imgur.com/RECGP.png') repeat 0 0;
}
Its working fine now check :- http://jsfiddle.net/hWvCK/2/
Your CSS is invalid:
http://i.imgur.com/RECGP.png
body {
font-family:arial;
font-size:14px;
background-image:url('http://i.imgur.com/RECGP.png');
background-repeat:repeat;
}
just remove the out of place url:
body {
font-family:arial;
font-size:14px;
background-image:url('http://i.imgur.com/RECGP.png');
background-repeat:repeat;
}
Also the image you are using is being blocked when requested with certain refer headers.
The image itself can be accessed fine: http://i.imgur.com/RECGP.png
On JSBin the image is not blocked: http://jsbin.com/ixibot
Yet as part of a JSFiddle page it is blocked: http://fiddle.jshell.net/hWvCK/2/show/
Seems this is not only confined to JSFiddle ( http://forumserver.twoplustwo.com/55/about-forums/imgur-being-blocked-1184548/index2.html#postcount32237568 )
Related
I am working on a WordPress site, and would like to set a different background image only for one specific page. Here is the current CSS calling for the image:
div#header .box-masthead .title a{
background:transparent url(../images/logo.png) left top no-repeat
How can I set it up so that I can use something like logo-2.png as the background image only on one specific page, while keeping logo.png as the background image on all other pages?
Wordpress gives every page a page-id class that can be found on the body tag. It looks like page-id-xxx where xxx is a number. I you find out your page-id then it's easy to change the background for that specific page:
body.page-id-10 {
background-image: url("../images/logo.png");
}
Try with the below CSS on the basis of WordPress page id -
.page-id-PAGEID div#header .box-masthead .title a {
background:transparent url(../images/logo.png) left top no-repeat;
}
Note: Replace "PAGEID" with page id in WordPress.
I'm trying to put in a background image for my website and the background remains white. On inspect element it says that my image could not be found.
The CSS file is linked with the HTML file because other images work, and the full directory is:
F:\Pete\Web Design\Assignment\images\background.jpg
Image link for the error, if it helps:
body{
background-image:url(images\background.jpg);
}
This is the code for the background image I'm using.
Try using a Forward-Slash /
body{
background-image:url(images/background.jpg);
}
If you have your CSS in a subfolder, the following may solve the problem:
body{
background-image:url("../images/background.jpg");
}
Put your path in quote
body{
background-image:url("images/background.jpg");
}
If it is different it will not work.
F:\Pete\Web Design\Assignment\images\background.jpg
F:\Pete\Web Design\Assignment\index.html
I have a really weird problem. I have tried to use CSS to set the backgorund of the body, but it doesn't allow me. When I'm using the simple HTML tags within the tag
<body background="images/bg.jpg">
its WORKING! BUT when I'm using this in CSS:
body {
background-image: url(../images/bg.jpg);
}
It doesn't shows the BG image.
Everything is correct, if I check the folders, everything is in its place. I have tried this in Chrome and Mozilla, but neither of them are working.
Any suggestions?
If your CSS is inline:
<style>
body { background-image: url('images/bg.jpg'); }
</style>
If you're using a file, say css/main.css:
body { background-image: url('../images/bg.jpg'); }
Alternatively, you could use an absolute path:
body { background-image: url('/images/bg.jpg'); }
This example requires the image directory to be in the root web directory.
Try url("./images/bg.jpg") or url("/images/bg.jpg").
I had exactly the same trouble here. I thought that I tried everything but ... There was one more thing.
Firstly, my css path as followed:
assets/css/custom/main.css
my image folder as followed:
assets/img/bodyBackround.jpg
In order to display my backround on the page using css I had to go 2 folders back. Example from my page:
body{
background: url(../../img/bodyBackround.jpg) repeat;
}
Where ../../ means go back 2 folders. Hope this helps.
More information can be found here http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/
I have such problem with images in Chrome:
when page is loading firstly text appears, than text is moving, and finally images appearing.
I will show in screenshots ( if someone wants I can give you a link to site )
Before images are loaded
after:
I have set sizes of images.
HTML:
<img alt="I_01" height="66" src="http://91.228.126.168:3000/images/i_01.png" width="73">
and CSS(as you can see I'm using Bootstrap ):
.second .span4 img {
padding-right: 10px;
float: left;
}
Questions: What I need to add to make them load properly ? What I should do to prevent images loading cause on performance ?
Hi now used to this image in background in your anchor link
as like this
Css
.textline{
display:inline-block;
text-decoration:none;
color:black;
vertical-align:top;
background:url('http://91.228.126.168:3000/images/i_01.png') no-repeat 0 0;
padding-left:80px;
line-height:70px;
}
HTml
link Text
Demo link
You need to preload images so that images are ready in cache before browser displays the images.
image preloading can be done in javascript. you may follow the link below for the same.....
http://www.learn-javascript-tutorial.com/ImagesWindowsandTimers.cfm#Preloading-Images
You can explicitly specify width an height for images, then text won't move even if image is not loaded yet. Browser will immediately display empty images of specified size, and then load images.
everyone. I'm trying to give a text link a background image but I'm not having any luck, I've got no image appearing. I was wondering if someone one could tell me if my code is wrong and what I can do to correct it. Thanks for any help in advance.
Here's my css code, hlink and home are ids, and home is my positioning of my link text
#hlink:link{
background-image: url("../media/taboff.gif");
color:#000000;
text-decoration:none;
}
#hlink:visited{
color:#000000;
text-decoration:none;
}
#hlink:hover{
/*background-image:url("../media/tab2.gif");*/
text-decoration:underline;
color:#EF504B;
}
#hlink:active{
text-decoration:underline;
color:#EF504B;
}
#home{
position:absolute;
font-size:2em;
top:270px;
left:300px;
text-align:center;
and here is my html code
<div id="home">
<a id="hlink" href="midterm.html">Home</a>
</div>
Edit: I just want to say thank you all so much for helping me, every single one of you have saved my life, I don't know if edits notify everyone who has answered, but again, thanks so much. Aside from some missing code, my biggest problem was with the image itself that I was using so that's my next issue to correct. I tested out a different image and it worked 100% so thanks for that everyone. I'm also relatively new to this, I'm a freshman in college and have only been doing this for a few weeks(I also have a terrible professor but that's another story for another time) but I'm glad to have found such a helpful community, hopefully one day I'll be able to contribute myself.
Works for me: http://jsfiddle.net/GTHyU/
My guess is that perhaps you have made your url() relative to your HTML page instead of your CSS file? Try it with an absolute URL first and see if it starts working, then figure out the appropriate relative path you need based on the location of the CSS file.
Try it like this
#hlink{
background:transparent url(../media/taboff.gif) repeat-x 0 0;
color:#000000;
text-decoration:none;
}
Check working example at http://jsfiddle.net/nh7nY/
Add these styles to each link:
display: block;
width:100px;
height:100px;
That should make the background-image appear. You can change the height and width to fit your requirements.
Try this:
#hlink:link {background:url(images/media_library.png) no-repeat top left}