I have a background image set on a web page with the following CSS:
body, html
{
background-image: url(Content/Images/bg-lounge-2-l.jpg);
background-repeat: repeat;
background-attachment: fixed; /*background-position: 0 -390px;*/
}
This background was visible until late last night, in Firefox and IE, but at some point something changed and it no longer shows in the browsers. It does show in the VS 2008 designer, and the image is in the correct location. If I paste the image url into my address bar, I can view the image. What could be wrong?
Remember that the url to the image is relative to the path to the CSS file, and not the HTML file that loads the CSS file. Also check that you have the correct spelling and capitalization.
Related
I have a css file in my static folder, where I set a background-image for a site of my Flask App. However, no matter what I try, it doesn't apply any "size" parameters I insert. It always stays the same! background-size is ignored by the browser. It always looks the same.
In Chrome the image is always too big. In firefox it works correctly. When I press ctrl + plus/minus, the background image gets bigger/smaller in chrome, whereas in firefox it stays the same. What am I doing wrong?
I insert the style.css file in my html-template like that: <link rel="stylesheet" href=" {{ url_for('static', filename='style.css') }} ">
my style.css-file:
body {
background-image: url("myPicture.jpg");
background-repeat: no-repeat;
background-size: cover;
}
The url in the .css file is not pointing towards a valid image file url. Assuming the file is stored in the static folder of your app, you can try:
background-image: url("static/myPicture.jpg");
I'm not sure where the current background image is coming from, we simply don't have enough info to properly debug.
How to locate the right url in css to have the backround images
my code here is
background: url('/assets/images/banner/banner1.jpg/') no-repeat;
and this is my local address
H:\xampp\htdocs\web-repo\test\assets\images\banner\banner1.jpg
With a file structure like this:
+--test
+--assets(folder)
+--css(folder)
+--custom(folder)
+--custom.css
+--images(folder)
+--banner(folder)
+--banner1.jpg
index.html
To set the background image from CSS
background: url('../../images/banner/banner1.jpg') no-repeat;
Asuming you index.html is in H:\xampp\htdocs\web-repo\test\index.html
background: url('/assets/images/banner/banner.jpg') no-repeat;
Your file is called banner.jpg and you are referring to banner1.jpg
also you should remove the / from the end.
To be sure your browser is refreshing the cache use Ctrl + F5 to reload.
You can also try the "inspect element" tool in firefox or "inspect" in chrome by doing right click on your index.html. Try editing the css located in your right hand side until you get the right URL for the image. 404 means your URL is not correct.
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
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.