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/
Related
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 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 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 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')}
I'd like to edit some background properties on my Wordpress site.
Using Chrome's Inspect Element I can see that currently I have:
body.custom-background {
background-color: #f6f6f6;
background-image: url('http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
I would like to edit background-repeat to no-repeat and background-position to right.
Sounds simple but when I look in the Editor in Wordpress the selector does not exist. It turns out that this styling appears to be within the html on line 53 of the home page.
If it was a handcoded website I would just update the stylesheet but since it's a database driven Wordpress site it's more difficult to know where to edit.
I wonder if there is a means of adding styling to the body element background that overrides any other properties? So basically, if I was to add to the very bottom of the stylesheet the following code to override anything else.
body.custom-background {
background-repeat: no-repeat;
background-position: top right;
}
I did try just adding that but with no success. Any ideas?
its showing up in the header - by the looks of it - its probably a custom background image set in the wordpress backend.
a rather round about way of fixing this can be to add
<style>
body.custom-background {
background-repeat: no-repeat !important;
background-position: top right !important;
}
</style>
to your header or footer
It seems like it's hard-coded, as you suggest. It's located within the <head> tag, which means it's probably part of header.php. Instead of editing style.css, why not look in header.php and change it there (or better yet, delete the reference in <head> and move .custom-background's style information to style.css)?
Edit According to the Codex, custom backgrounds are enabled using the following line in functions.php:
add_theme_support( 'custom-background' );
Removing this line (and then setting your desired background properties in style.css) should do the trick.
i have to manage background in inspect element css this is success css
code:
<style>
body.custom-background {
background-attachment: fixed;
background-color: #F6F6F6;
background-image: url("http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png");
background-position: right center;
background-repeat: repeat-y;
}
</style>