Adding / replacing images in CSS

normsreviews · Member · Dec 3, 2008 at 10:06 pm
Copy link

Add topic to favorites
I have a Custom CSS blog I’m working on (see JeanSlatter.Wordpress.com as it isn’t my default blog).

I’m trying to replace images in the DIVs. When I look at the template DIV (e.g. DIV id=”header”) there is the following link to the default image:

url(images/bg_header.gif) no-repeat 50% top

So I replace the image placeholder with an image that I have uploaded to the gallery as the following:

url(images/background.gif) no-repeat 50% top

However, the new image doesn’t appear. I’m wondering what I’m doing wrong. Doesn’t the custom CSS cascade and take precidence over the template CSS? Is is that the gallery has a different url than “images/xxxx”?
devblog · Member · Dec 3, 2008 at 10:21 pm
Copy link
The path in the URL is wrong, you must type the whole URL and it should read something like this:
```
http://jeanslatter.files.wordpress.com/xxxx/xx/background.gif
```
Try that.

HTH
aw1923 · Member · Dec 3, 2008 at 10:24 pm
Copy link
what I do is upload the image that I want as a header onto wordpress and then obtain the image url. Then you place the image url into parentheses, see…

background:url(‘image URL with the http://’) no-repeat;
aw1923 · Member · Dec 3, 2008 at 10:25 pm
Copy link
Man, I need to start typing faster.
normsreviews · Member · Dec 3, 2008 at 11:53 pm
Copy link
Cool… I was thinking that somehow the url wasn’t matching up. Foolish me… I though images… would work :0
tiphereth · Member · Dec 7, 2008 at 8:10 pm
Copy link
I’m having the same problem as normsreviews. I’m trying to see how my blog will visually look before I go and purchase the custom css upgrade. When I put in the urls for the images, however, they don’t show up in the preview no matter what I do. I’ve tried url (‘img http url’) and nothing is showing up. I’ve also uploaded all of the images needed for the design to my gallery. Any ideas why that could be?
devblog · Member · Dec 7, 2008 at 8:24 pm
Copy link
link to your blog, please
tiphereth · Member · Dec 8, 2008 at 4:28 am
Copy link
Sure! My blog’s link is http://tiphereth.wordpress.com/. For now, I have a pre-made template that is free from WordPress. I didn’t buy the upgrade customization so I can’t save my work. I wanted to preview it first beforehand.

Some background: I downloaded this premade template for WordPress. Most of the files were php but I found the css file. I uploaded the pictures to my account and then I took the urls from those files and pasted them into the css file. I then took the css file and tried pasting it into the box.
devblog · Member · Dec 8, 2008 at 5:05 am
Copy link
Well, you see… the CSS file won’t work because it has declarations to elements that do not exist in the underlying HTML source.

So, for instance, your HTML source code reads something like this:
```
<div id="wrapper">
    <div="header">
    ....
    ....
    </div>
    <div id="contents">
    ....
    ....
    </div>
    <div id="footer">
    ....
    ....
    </div>
</div>
```
And in your CSS you have:
```
#wrap {width: 760px; background: #ccc;}

#container {background: #fff;}

#bottom {text-aling: center;}
```
Then, those CSS definitions won’t be applied to your HTML elements simply because they don’t match.

If you want your layout to be affected by your CSS, then your selectors (i.e. #wrapper) have to match with the HTML element in your source code. In other words, “

gets affected by “#wrapper”; “

gets affected by “#contents”, but “

doesn’t get affected by “#bottom” because of the mismatch I told you about.

I hope this explanation was clear and helped to clarify why your changes didn’t work.
tiphereth · Member · Dec 9, 2008 at 12:39 am
Copy link
That makes perfect sense! I should have thought of that but I didn’t. I’ll check it out and see if that has been my problem all along. Thanks for the advice!
dec2208 · Member · Dec 31, 2008 at 4:24 pm
Copy link
how do you get css for free for the title header
aw1923 · Member · Dec 31, 2008 at 5:03 pm
Copy link
you cant get CSS for free, but some themes come with an option to add a custom header.
thesacredpath · Member · Dec 31, 2008 at 5:18 pm
Copy link
And as far as changing the blog title, you do that by going to settings > general. There you can change the blog title and the tagline. Do be aware that not all themes display the tagline.

No items found.