I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html
Related
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!
I'm talking about the <html> element itself, seems to work in most browsers, but IE7/8 doesn't want to play. The reason I'm even doing this is because my chore is to theme a RoboHelp web output which uses a million frames - I need to set the topmost frameset's background image otherwise background-positions don't line up when a nested frame invokes a vertical scrollbar.
I tried applying height:100%; on the <html> element also. Solution must work in IE6+. Javascript should be avoided.
EDIT:
Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" to the html element via a style block in the header (everything is dynamic, this is my only available method of accessing the html element).
Good heavens, just tested this on a basic page - fine. Replace the body tag with a frameset, like in my situation, and now the images don't show up. This looks to be IE-frameset specific, any suggestions?
Not sure I completely understand your problem. But applying height to an HTML element is a definite no-no. You can apply a background directly to the entire page using the HTML selector
html {
background-image: url("../images/background_image.png");
}
Hint: the '..' in the above example moves to the previous web directory. Be cognizant of your file structure.
I think you should be using CSS instead of HTML background image tag. Background image in HTML is now deprecated (outdated and not recommended) by the W3C.
Something like this:
<html class="imageBox">
<style type="text/css">
.imageBox {
width:300;
height:100;
background: url("/foobar.gif") #ff9900 90% 30% no-repeat fixed
}
</style>
<p>This div element has a background-image.</p>
</html>
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .
I'm trying to make a CSS code that changes the cursor to a picture file when the cursor is on a webpage. I've seen sites that give you a simple code to do it but they always have ads. Any codes you guys know that can do this?
Yes, simply apply the following css code to your body tag (assuming you want effect for whole page):
body {
cursor: url('URL to image');
}
Further information:
The image file must be 32x32 or smaller
Internet explorer only supports .cur files
CSS:
html{
cursor: url(URL of pictures)
}
Other Simples:
http://www.html1.freeiz.com/Your_cursor.htmlhttp://jsfiddle.net/wNKcU/5/http://jsfiddle.net/wNKcU/788/
create an HTML element with the cursor image you want and use javascript's onmousemove event to move the cursor.
window.onmousemove= function(e) {cursor.left=e.x;cursor.top=e.y;} //cursor is the HTML element