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.
Related
In Spree 3.1 Standard Themes (out of the box)
I tried to change background image.But not work. Perhaps the path is wrong. Help need.
Here what I did.
Upload image to be /app/assets/images/NewBackGroundImage.png
Add css in vendors/assets/stylesheets/spree/frontend/custom.css
CSS:
.spree-header{
background-image: url("/assets/images/NewBackGroundImage.png");
background-size: cover;
margin-bottom: 10px;
}
Here my inspect of the current page
This part is my attached screen shots for my comment of the answer below.
At the inspect screen it clearly display error 404 (Not Found)
Tried change to use asset-url then
SCSS:
Then Change my custom.css to custom.scss
And this is the inspect shot NOW IT WORK
As I can see, your page doesn't use your styles at all. Are you sure the div tag has the class "spree-header". Because in your browser it only has id "spree-header" and nothing about the respective class. Try to replace it from .spree-header to #spree-header. If there might be confrontation between styles, then you can always try the usage of !important tag: url(...) !important;
If the folder "vendors" is in the "app" folder, then you can use the relative path url("../../../../../assets/images/NewBackGroundImage.png") as well
I have a hard time adding picture through background-image property in css
my file structure looks like this:
www
styles
stylesheet.css
images
background.jpg
I tried:
background-image: url("/images/background.jpg");
background-image: url("images/background.jpg");
background-image: url("background.jpg");
background-image: url("../images/background.jpg");
background-image: url("/../images/background.jpg");
background-image: url("../../images/background.jpg");
I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?
www
index.html
styles
stylesheet.css
images
background.jpg
that the directory, here inside index.html / index.php (where u want show)
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
remember for href link
and then at stylesheet.css
background-image: url("../images/background.jpg");
background-image: url("../images/background.jpg");
This is correct. If it is not working, perhaps the path name is not the problem.
Are you running this from a server?
Or, are you running this from your computer?
Try changing the situation and see if anything changes.
I'd put my money on spelling mistake, though. Best to triple check it.
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'm trying to repeat an image I have by x and y, using repeat-all. The image isn't displaying.
Here is the CSS code:
body
{
background-image: url('Content/images/test.png') repeat-all;
}
I'm sure the CSS file is linked correctly, here is the Content folder of my application:
Any help?
That's actually not being linked correctly, if that code is in your Site.css file. It should be:
background-image: url('images/test.png') repeat-all;
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.