I cant change my body background and background color with
For example:
body { background-color:#0c0; }
And
body { background-image:url(../images/bg/stone.png); }
Pleas help !
Possible reasons of not working:
You haven't linked your stylesheet
Your image would not be in the same path.
Your image's extension would be different.
Your hash or hexadecimal color code is wrong.
Your path to image is wrong.
Here is a working fiddle proving that it does work though the background of the body is a funny one as sometimes it calls it if you are calling it off the internet and sometimes it won't so make sure you have the image in a directory called images and the call it like this:
body {background: url('images/yourimage.jpg');}
and to add the color add your color like this:
body {background: red url('images/yourimage.jpg');}
Here is a working fiddle: http://jsfiddle.net/Hive7/xmj7C/
It uses this css:
body {
background: red url('http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg') no-repeat;
background-size: 500px 500px;
}
Make sure your file that your are calling it from is in the same directory as the one with the directory images
Related
I want to add a fixed image for my body's background, but it doesn't work yet.
I tried to write the correct code, though even after re-checked it, it doesn't work. I tried to set a background-color, and it's working fine. I also re-checked the image's URL, and it seems to be the good one.
body {
background-image: url:("https://media.istockphoto.com/photos/magic-hands-picture-id182751516?k=6&m=182751516&s=612x612&w=0&h=Sh6eYcq8Sbapy1jDwW0bjYO-0295X0Ju8jQbi0YOLAs=");
}
No error message. Background remains white & blank. Nothing happened. Here is the
URL of my Code-pen : https://codepen.io/Peyo5202/pen/zYOrzMZ?editors=0100
Remove the ':' after the url
body {
background-image: url("https://media.istockphoto.com/photos/magic-hands-picture-id182751516?k=6&m=182751516&s=612x612&w=0&h=Sh6eYcq8Sbapy1jDwW0bjYO-0295X0Ju8jQbi0YOLAs=");
}
You can also make background image fixed by adding following CSS :
background-repeat: no-repeat;
background-attachment: fixed;
The correct syntax for background image is as follows :
background-image: url("{Image-URL}");
In your case you have added extra : after url, That is the reason it's CSS is getting invalid.
You can simply make following change and get your background image working as expected.
body {
background-image: url("https://media.istockphoto.com/photos/magic-hands-picture-id182751516?k=6&m=182751516&s=612x612&w=0&h=Sh6eYcq8Sbapy1jDwW0bjYO-0295X0Ju8jQbi0YOLAs=");
}
You can also add background to body from tag directly as follows :
<body background="https://media.istockphoto.com/photos/magic-hands-picture-id182751516?k=6&m=182751516&s=612x612&w=0&h=Sh6eYcq8Sbapy1jDwW0bjYO-0295X0Ju8jQbi0YOLAs=">
For more info on background image property please follow below link :
CSS background-image Property
remove ':' after url
background-image: url("https://media.istockphoto.com/photos/magic-hands-picture-id182751516?k=6&m=182751516&s=612x612&w=0&h=Sh6eYcq8Sbapy1jDwW0bjYO-0295X0Ju8jQbi0YOLAs=");
We use modernize theme for our website.
I want to increase the size of main content area. I just want the background image (gray lines) to take mush less space.
I have tried changing theme's own css file & custom css file both. But it's not working.
pls see the website : www.gtctrust.com
or the picture below:
image
Don't use !important as someone just suggested. Just strenghten your selector here from:
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}
to
body .container-wrapper, body .body-wrapper .all-container-wrapper.boxed-layout{
width: 1060px;
}
see if this works for you
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}
I am using the following CSS code:
body
{
background-image: url(img/tasky_pattern.png);
}
My image address is downloads/dist/image/tasky_pattern.png. I have no idea where I am going wrong and how to correct this.
Thanks.
You need to make sure your image exists in your folder, so upload your image to the ./img/ folder. Then you could use the following CSS code:
body
{
background-image: url("img/tasky_pattern.png") repeat;
}
If you cannot upload the image to your ./img/ folder, you can upload the image to a free file hosting website and use the link they provide instead.
The image you are link to img/tasky_pattern.png is under a folder called downloads/dist/image/tasky_pattern.png but you used img instead of image
Have a look at fixing that typo. This is probably why your image is not showing.
To check your file references open your page in chrome and inspect element. Find the css code that says background-image: url(img/tasky_pattern.png); and then navigate to the destination. This will give you the full url in your browser address bar and will show you where you went wrong with your path name
the css background default behavior is repeating itself...
you can specify exis
background: url('image_path'); /* it repeats itself */
// or //
background: url('image_path') repeat-x ; /* it repeats only x-exis */
// or //
background: url('image_path') repeat-y ; /* it repeats only y-exis */
// or //
background: url('image_path') no-repeat; /* no repeats */
SEE DEMO
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
I am designing a website using the Flat UI Twitter Bootstrap mod. While trying to set a background texture, I have found that it is not visible. Here is my CSS:
body
{
background-color: transparent;
background-image: url(img/texture.png);
}
Can someone help me to get my background texture to work?
Without more details, the first thing I would check is the path to the texture.png image. Since its a background image, the url is relative to your stylesheet.
So say your your CSS is in the website/css folder and the texture is in the website/images folder, your CSS would be more like:
body
{
background-color: transparent;
background-image: url(../images/img/texture.png);
}
If you know how to use the web inspector or something similar on most browsers, it will help to pinpoint the source of the problem.
Good luck!