problems with background image

25 Posts

firewireflow Reply #1, 18 years, 8 months ago

hi everybody!

got a problem with putting a background image behind my headline using css.

the css loads successfully but the image doesn’t show up!

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#CC9900;
	padding-top:2px;
	padding-left:2px;
	padding-bottom:0px;
	background-image: url([(base_url)]assets/images/bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}

i always test things by creating a site outside of modx with bbedit and it worked fine there. so whats wrong???

like always, help is truly appreciated!

thanks a lot
best
firewireflow

2,310 Posts

bunk58 Reply #2, 18 years, 8 months ago

If your using an external stylesheet called in the head section of your page the the img url should be relative to the stylesheet.
for example

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#CC9900;
	padding-top:2px;
	padding-left:2px;
	padding-bottom:0px;
	background-image: url(images/bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}

or whatever the location of your image folder is relative to your css stylesheet.

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 18 years, 8 months ago

If your css is in an external .css file, you can’t use MODx tags like [(base_url)] in it. The external .css file doesn’t go through the MODx parser, so the tags don’t get processed. If you want to do that, you either have to have the css in your template head, or use a MODx document as a css resource.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org