In global.css and/or mytheme-theme-alpha-default-wide.css I am able to change the background color of a section zone or region, e.g.
#section-header {
background-color: #00ff00;
}
but I am unable to get any background image to display or as far as I can tell to even be attempted no matter what combination of file locations/paths or what section or region I try to make the image appear.
#section-header {
background-image: url("sites/default/files/pictures/hdrbkgrd.png")repeat-x 50% 0;
}
I get no errors and upon inspecting the css in firebug background-image remains "none". Caches cleared page reloaded ....
I'm sure it is me and a misplacement of the requisite braincells to accomplish this basic task. Please advise.
Comments
Comment #1
sumerokr CreditAttribution: sumerokr commentedhttp://www.w3schools.com/css/css_background.asp
background-image property don't allow you to set background-position.
use background
or
background-image + background position
Comment #2
pauljr8 CreditAttribution: pauljr8 commentedThanks for the reply. Whether I try to repeat the background image position the image or try to use any other image, I'm getting nothing. No errors, no image. It seems that although it is recognizing background-color: it is silently ignoring background-image:
Comment #3
sumerokr CreditAttribution: sumerokr commentedtry this:
#section-header {
background: #00ff00 url("sites/default/files/pictures/hdrbkgrd.png") 50% 0 repeat-x;
}
or
#section-header {
background-color: #00ff00;
background-image: url("sites/default/files/pictures/hdrbkgrd.png");
background-repeat: repeat-x;
background-position: center top;
}
Comment #4
pauljr8 CreditAttribution: pauljr8 commentedWhether positioned or repeated, it seems my image declaration is being ignored.
#section-header {
background: #edede1 url("sites/default/files/pictures/hdrbkgrd.png") 50% 0 repeat-x;
}
and
#section-header {
background-color: transparent;
background-image: url("sites/default/files/pictures/hdrbkgrd.png");
background-repeat: repeat-x;
background-position: center top;
}
still produces no image.
Comment #5
sumerokr CreditAttribution: sumerokr commentedi've tried it on my site and it works fine.
check image existing on your path
upd. if your color apply's well, then the problem is on image path/image name for sure
upd2. mybe you missing hdrbkgrNd.png
Comment #6
pauljr8 CreditAttribution: pauljr8 commentedI have thought the same thing and have placed the image in many places and tried many paths. This is something I've done a thousand times but never in Omega. The image "is" in sites/default/files/pictures as are other images that get used, just not for backgrounds.
upd1 This goes for any image called as a background. Maybe it's a firefox 6.0 thing.
upd2 Updated omega and company to 7.x-3.0 but still no background images.
upd3 I think it's time to re-think using an image as a background at least for me for now. It's just not working on
Drupal 7.7
FF 6.0
PHP 5.3.6
Apache 2.2.19
MySql 5.5.14
Fedora Core 15
Comment #7
sumerokr CreditAttribution: sumerokr commentedcan you give us a link to your site?
Comment #8
pauljr8 CreditAttribution: pauljr8 commentedThe site is still under construction on my localhost. I will likely upload something by Wednesday (sans background images). Again though thanks for your assistance.
upd1 the file was not found because it was not located in sites/all/themes/papb_theme/css/ even though I tried telling it explicitly where it was even via a full http:// url
I hope I am missing something so I won't have to keep some images in sites/all/themes/....... as well as sites/default/files/pictures/
Comment #9
sumerokr CreditAttribution: sumerokr commentedhuh. finaly got a solution. you should use this:
background: #color (../../../../default/files/image.png) 50% 0 repeat-x;
../ - 1 step up from your theme css folder
Comment #10
hexabinaerIn case someone steps over this ...
For theme-related images you'd better use an images-folder within your theme folder. Makes it much easier to use relative paths ;-)
As to the above solution (#9), you might want to use root-oriented paths, i.e. (/sites/default/files/sitebackground.png), in order to spare yourself the folder levels counting.
Comment #11
marcoka CreditAttribution: marcoka commentedComment #12
marcoka CreditAttribution: marcoka commentedComment #13
ydv.rahUL CreditAttribution: ydv.rahUL commentedthis worked for me....
i used a relative path, with this the picture in my subtheme folder ,
so in the global.css
body{
background-image: url('../images/your-pic.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100%;
}