Forums

Background-Image url issues

Permalink
Once I upload my modified main.css for the slate theme to call for a customized background-image, the page doesn't display it. Upon inspection with firebug, the css shows a url that isn't what I called for.

What I've added to the main.css is this:

body {
/* customize_background */ background-color:#6eb8e6; /* customize_background */
margin:2%;
padding:0;
background-image: url('http://citisolar.ca/BGTEST.png');

}

What I'm getting is this:

body {
background-color: #6EB8E6;
background-image: url("http://citisolar.ca/packages/theme_slate/themes/slate/http://citisolar.ca/BGTEST.png");
margin: 2%;
padding: 0;
}

Why is the URL duplicating the same string of text??? Which of course points to a bad URL.

I've checked everything...I think...

Any help would be great.
-D
 
Adreco replied on at Permalink Reply
Adreco
Hi,
When calling up an image from within your site, thehttp://citisolar.ca is redundant. Edit your CSS to show only the internal path and image name instead. I usually place the images in a folder (named images) so the path would be images/BGTEST.png

Hope this helps

Adrian
Arvixe Web Hosting / Concrete5 Community Liaison |
http://www.arvixe.com/concrete5_hosting.............
shondy replied on at Permalink Reply
shondy
Put the background image in the theme directory, maybe in the folder "images" if there is not one there already, and use a relative URL instead.

Your css (which should already be in the "packages/theme_slate/themes/slate" folder)
background-image: url('images/BGTEST.png');


Output css
background-image: url('http://citisolar/ca/packages/theme_slate/themes/slate/images/BGTEST.png');
fayze replied on at Permalink Reply
Awesome! Thanks guys - I had a feeling my paths were incorrect, or at least correct, just redundant like you've both clarified for me.

I have another issue now...hope its okay to post here.

The powerslider on my homepage. I'm trying to add a border around the block, which I can get to work fine, but something is wrong with the blocks definition. The problem is after defining the size of the block under the elements "how wide do you want this thing" - the block visually scales to how big I want, but the element still shows it spanning across the entire body (inspector shows this) you can highlight the block and it shows it spanning all the way to the right behind the tweetcrete sidebar. So my border doesn't show around the entire block...

What do you think I could edit in the css or the view php to correct this?

Thanks in advance.
-D
shondy replied on at Permalink Reply
shondy
There is probably an element that has overflow set to hidden, and you need to apply the border to the containing element.

You can try adding css to the theme like this:

powerSliderContainer {
     border: 1px solid red!important;/*replace with whatever you want your border to be*/
}


You can also place custom css in your theme under the theme's customization section, which is where some themes allow for adjusting background colors, etc.

Maybe including a screenshot of what it is doing would be helpful.