I am having trouble understanding how to troubleshooting why my browsers(google chrome and safari) are ignoring the background image. I can see the url built correctly in the dev tools, however it is struck out (the important override still fails here too). Here is my code:
body {
background-image: image-url('blue.jpg') no-repeat center center fixed
}
the image is stored in app/assets/images.
As always, any help is greatly appreciated.
try removing image-url and just using url
body {
background-image: url('blue.jpg') no-repeat center center fixed
}
I ended up setting the image as a background instead of a background-image:
body {
background: asset_url('blue.jpg') no-repeat center center fixed;
color: ...
margin: ...
padding: ...
}
I do not understand why this works however.
Related
Dear fellow programmers
I have a little issue with my CSS code. I have an image as background and want it to cover the whole screen. The issue is that it only covers 4/3 of the background. There is a blank space at the bottom of my page.
Here is the code I have so far:
body {
background-image: url(http://gymgames.ch/img/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
The image URL is working if you want to see the whole image.
The page URL is: https://gymgames.ch
Thanks for your help in advance
If you don't have any other content on the page you can add something like
body{
min-height: 100vh;
}
As you specified, the background image is covering body, but body will not necessery be as height as your device.
You could add min-height: 100vh; to body and then it will work.
Btw. you are using background-position: fixed; which is an invalid value for the property, have a look here. I think what you were looking for was center instad of fixed?
EDIT:
It it worked before, you have had enough content, so the body was high enough.
i am having trouble with changing background image,
html:
<ion-content padding class="arkaplan">
scss:
.arkaplan {
background-image: url("../../../www/img/arkaplan.jpg") no-repeat fixed center;
background-size: cover;
}
with this nothing changes.
i check some similar topics and some of them solved the issue with this:
background: url("../../../www/img/arkaplan.jpg") no-repeat fixed center;
but that way, i am getting an error in chrome like:
GET http://localhost:8100/www/img/arkaplan.jpg 404 (Not Found)
and black background. but if i put a web url to image it works. so basically app cant find my file but my directory is correct.
thanks for your support..
I'm new to CSS and was hoping someone could help me understand what I'm doing wrong. I'm trying to get an image to show up but it seems that no matter what I do it refuses to display on my page. Can someone please explain to me what I'm doing wrong?
Image saved in: Users/NenaH77/assignment/images/sitebg.jpg.
Css file is saved under: Users/NenaH77/assignment/css/style.css
body{
background: url('../images/sitebg.jpg') no-repeat top top #31b8ea;
}
By having ../images I thought the image saved in the folder was suppose to go up 2 levels and into my css folder so I don't understand why my image isn't showing up :(
Your CSS background declaration is invalid:
top top should be top or top left or some other valid combination of positions.
Try :
body {
background: url('../images/sitebg.jpg') no-repeat 0 0 #31b8ea scroll;
}
You need should probably put the background color first.
body { background: #31b8ea url('../images/sitebg.jpg') no-repeat top }
Mr. Slayer gave you the right answer though.
To go up 2 levels do this
background: url('../../images/sitebg.jpg') no-repeat top top #31b8ea;
This will work. You can see the fiddle here.
body { background: url(../../img/image.jpg) no-repeat center center; background-size: cover;}
This will also take you up two levels...
I just ran into this same problem. What worked for me was putting the full path of the image from my pc, instead of from just inside the project folder.
So in this case use
body { background: url('C:/Users/NenaH77/assignment/images/sitebg.jpg')}
Instead of
body { background: url('../images/sitebg.jpg')}
.up { background-image: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; }
This code is giving me an 'invalid property value' in crome (and safari). I'm using the exact same code on another page, working correctly. I cleared my browser cache. If I remove 50% 50% no-repeat it works fine. Adding either of those 2 properties spikes it again to invalid (testing using developer tools).
I ran it through ProCSSor as well to clean it up, so I'm not sure where I'm screwing it up...
Yep because the background-image property is for the image part only, not the position or repeat properties of the background, use background:
.up {
background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat;
}
Chrome* will also throw this warning (and doesn't display the bg image), if you have a blank space between url and ( like:
background-image: url ('img/web-bg.png');
^
(Which was the reason for me to search and find this question but no answer and then doing trial and error.)
... maybe depending on the Chrome version, I assume.
Even if you do everything described above, you may get an "invalid property value" in Firefox. The workaround is to convert:
background: url(../img/showcase.jpg) no-repeat top center fixed/cover;
into:
background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;
This error also occurs in Chrome when you don't use apostrophes and your file has spaces. Simply change:
background-image: url(../img/file with spaces.png);
to:
background-image: url('../img/file with spaces.png');
Just delete ../ and use it as
background: url(img/showcase.jpg) no-repeat top center;
I am getting problems on using multiple images in the background of my web pages. I used the following codes for it:
body{
background-image: url(images/img1.png), url(images/img2.png); }
The code I used gives me two images on background but I want to keep one of the image exactly on the center. How can it do so using CSS?
Yeah, you can do it like this
body {
background-image: url(images/img1.png), url(images/img2.png);
background-repeat: no-repeat, repeat-x;
background-position: center, top left;
}
Check a demo here.