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..
Related
I have tried to implement the following code but nothing happens
#masthead {
background: url('data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png') no-repeat center;
background-size: cover;
}
I am having no luck. IS my file to path format incorrect?
There is a space in your url after the "wp-"
data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png
Also the formatting seems off, see background property.
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.
I feel retarted for even having to post something like this but for being a vet in css I have no idea why this time I can't get an image to show in the background of a div. Here is what I have
#leadarea {
background-image:(images/submarines-for-sale-at-seamagine.jpg);
background-repeat: no-repeat;
background-position:center;
height:360px;
width:1160px;
}
<div id="leadarea"></div>
I have triple checked my path to the image and its correct. In the same directory of the file I have an folder called "images" and the file to that image. If I type in the full url to that image in a browser I can see the image. Why is my div not showing that image?
The proper syntax is:
background-image:url('images/submarines-for-sale-at-seamagine.jpg');
Also notice that the path is relative to the .css file placement.
Put the url in your background-image
background-image: url("your-image-path.jpg");
Try this to optimize your background definition in one line:
#leadarea {
background: transparent url("http://1.bp.blogspot.com/-5PauJ-PHxns/UVjwME0X9YI/AAAAAAAAA4s/lsd9ZRsfCnE/s1600/coelho+escolha.jpg") no-repeat center;
// background: color url("your-image-path.jpg") repeat position;
height: 400px;
width: 400px;
}
Check the example here: http://jsfiddle.net/R5cJp/2/
I'm creating a theme for a drupal site, it is very basic so far. The folder structure of the theme is like so:
theme-folder
-->css
-->style.css
-->images
-->first_page_slideshow.png
--drupal files--
The css for the region in question:
.content-header {
background-image: url ('../images/first_page_slideshow.png');
background-repeat: no-repeat;
background-position: left top;
width: 1024px;
height: 380px;
}
Yet I the image fails to load as a background. Google developer tools reveals that it is an "Invalid Property Value" on the background-image: css tag.
Any help would be appreciated.
This
background-image: url ('../images/first_page_slideshow.png');
becomes
background-image: url('../images/first_page_slideshow.png');
Just a space between url and the parenthesis.
A simple proof: http://jsfiddle.net/suLNk/
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')}