CSS Image Background

HTML & CSS
1

I’m trying to create this CSS image background in WordPress but the image background doesn’t appear,

802×481 36.5 KB

http://tinyurl.com/d6t833g

I used this code for HTML,

<div id="menu1" class="menu_pdf_styles">
   text would go here
</div>

<div id="menu1" class="menu_pdf_styles">
   <p><a target="_blank" href="PDFName">Click here to download Menu</a></p>
</div>

I used this code for CSS which I added to style.css file in WordPress,

.menu_pdf_styles {
   background-image: url('filefolder/filename.gif');
   you might have other CSS styles here;
}
2

Hello!

url(‘filefolder/filename.gif’)

You replaced this with the correct name/address of your file, right?

3

Hi Casterina. Welcome to the forums. :slight_smile:

It looks lke the background image is working, if I userstand what you are referring to:

background: url(images/menubg.gif) no-repeat black;

The HTML you posted above doesn’t match the HTML in the site you linked to, though. Be aware that you are not meant to use an id more than once per page.

4

This is my filepath to the Menu image file,

wp-content/uploads/2012/06/Menu.png

Which HTML should I use? The one I mentioned or the one on the website that I linked to?

5

This is too confusing. Is the site you linked to your or not? Because it’s working there …

6

The website I linked you isn’t my website but I like the Menu design so I want it on my website

7

Oh, OK. Well, if this is your file path

wp-content/uploads/2012/06/Menu.png

then just make sure that your CSS file is looking in the right place for it, and make sure it’s also called “Menu.png” in the CSS file and not “menu.png”. You have to match capitals and lower case.

What is your CSS rule for calling this image as a background, and where is your CSS file located in relation to the image file?

8

I’m not sure of the CSS rule of the image as a background, how do I find out? I’m editting the file style.css in WordPress

9

Is your site online? It would be much easier if we could just look at the page in question. Otherwise, maybe post all of your CSS here and I’ll see if there’s any rule there calling that image as a background.

Here’s how it’s done in the site you linked to:

.menul {
width: 375px;
float: left;
margin-right: 35px;
margin-bottom: 20px;
[COLOR="#0000CD"]background: url(images/menubg.gif) no-repeat black;[/COLOR]
height: 101px;
}
10

This is my style.css file,

.wp-caption {}
.wp-caption {}
.sticky {}
.gallery {}
.bypostauthor {}
.alignright {}
.alignleft {}
.aligncenter {}
.alignnone {}
.gallery-caption {}

For this bit,

background: url(images/menubg.gif) no-repeat black;

My filepath is wp-content/uploads/2012/06/Menu.png, how do I lay it out into the CSS code?

11

Hm, I’m not familiar with WP, but if that’s all the CSS you have, then your site has no styling at all at this stage? Is that the case? If not, view your page source (View > Source or View > Source Code) and see what style sheet the page is actually linking to, and see what styles are in there.

12

I’m using WordPress free template, I haven’t done any styling in style.css

I’ll use this CSS code,

.menul {
width: 375px;
float: left;
margin-right: 35px;
margin-bottom: 20px;
background: url(images/menubg.gif) no-repeat black;
height: 101px;
}

But for this bit,

background: url(images/menubg.gif) no-repeat black;

My filepath is wp-content/uploads/2012/06/Menu.png, how do I lay it out into the CSS code?

13

Is the HTML you posted above on your page yet? If so, try something like this in your style sheet:


.menu_pdf_styles {
   background-image: url('/wp-content/uploads/2012/06/Menu.png);
}

the theme you are using will have at least one style sheet of its own, so you might as well use that instead of style.css. Style.css won’t be of any use to you unless the these links to it. That’s why I suggested tracking down what style sheet the theme is actually using. Then you can just add any new styles to that style sheet. You can find out what style sheet the theme is using by viewing the source code of your page in your browser.

14

This is my current HTML,

<div id="menu1" class="menu_pdf_styles">Menu</div>
<div id="menu1" class="menu_pdf_styles">

<a href="Menu/Menu.pdf" target="_blank">Click here to view Menu</a>
</div>

I’ll PM you the link to my website

15

Did you find out which stylesheet the theme is using?

16

First locate where your images are being stored, if you don’t know this, nothing will work.

A good way to do tho it is to look at any other rules with ‘background: url(…)’ in your style.css file. make sure your image is in THAT folder and make sure you use the NAME path in your CSS rule.

also note: you use the same ID more than once (bad) and you have the same class nested… that is bound to give you headaches later on.

17

I did have a quick look at your page, but had to leave at that point. But now the link is gone. Anyhow, I did see the HTML you cited above in the page, but it wasn’t showing up on the page. The link to the pdf was fine, though. I don’t really like themes that are unrelated to your site’s needs like this. But to be honest, it looks like you need someone to help you with modifying a theme and styling it. It’s a bit of a messy business, but near impossible to do yourself if HTML and CSS are not your thing. But it’s impossible for us to help much if we can’t see what you are ding, I’m afraid.

18

Do you want me to put the link back up so you can see it again