Help - Search - Members - Calendar
Full Version: Background Image Not Displaying In Wrapper
Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion
heff
Hi,

I'm very new to website design, I've been developing a website for a scouting organisation that i'm apart of. I uploaded what i've done so far, so as i could test out wordpress, had a lot of trouble trying to set wordpress up locally.

Everything works, well everything i was expecting to work anyway, except that on my pages the whitebackground doesn't show within a wrapper that i've set up. I have it so that css displays the background image, when i'm using dreamweaver and coffeecup, it will show but when I uploaded it here it doesn't.

Would it have something to do with the path i have set up to locate the image, although i don't think it does as another pic shows up and it was set up the same way.

I know a bit of HTML but no where near an expert.

I initally downloaded a template which i have been customising, and don't know if it couldbe something to do with this.


I don't know if I explained this clearly but the website address is http://stmichaelstest.zxq.net/

The rounded white bar is set up the same way as the other white box is. he background should be white from this white bar all the way down to the scout footer and it should only be as wide as the middle section.


Any help anybody could give me, would be fantastic. I've been trying all sorts to get this working for the last few hours.


Thanks in advance

Gareth
zpcs
Hi Gareth,
To begin with, I'm not that familiar with WP.
In working with Templates it is always best to consult the Author of the Template as most issues can normally be addressed with extreme knowledge and understanding of the Templates Setup.
In creating files for Webs it is always good practice to use "lowercase characters" (No UPPERCASE CHARACTERS) Try all "lowercase characters" for the CSS Filenames: stylesMain.css and PNGfix.css.
Next you'll probably want to provide the same change to the CSS Filenames in the Homepage's Source Code:
CODE
  
<link href="stylesMain.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />

to become
CODE
<link href="stylesmain.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="pngfix.css" />


This is a start, make these changes and see what happens when you update your Web.
Keep us posted!

Hope this helps you out.
heff
QUOTE(zpcs @ Nov 26 2010, 05:23 PM) *
Hi Gareth,
To begin with, I'm not that familiar with WP.
In working with Templates it is always best to consult the Author of the Template as most issues can normally be addressed with extreme knowledge and understanding of the Templates Setup.
In creating files for Webs it is always good practice to use "lowercase characters" (No UPPERCASE CHARACTERS) Try all "lowercase characters" for the CSS Filenames: stylesMain.css and PNGfix.css.
Next you'll probably want to provide the same change to the CSS Filenames in the Homepage's Source Code:
CODE
  
<link href="stylesMain.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />

to become
CODE
<link href="stylesmain.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="pngfix.css" />


This is a start, make these changes and see what happens when you update your Web.
Keep us posted!

Hope this helps you out.



Hi zpcs,

Thanks for the reply, will give that a go now and will let you know how I get on.

You mentioned about themes and wordpress, the only thing I'm using word press for is to add news items and have them displayed on the front page. I tried uploading the index.php file again with all wordpress code removed and still had the same results. So I know the problem isn't with wp.

Anyway I'll make the changes you suggested and see what happens.

Thanks

Gareth
zpcs
QUOTE(heff @ Nov 26 2010, 01:52 PM) *
Thanks for the reply, will give that a go now and will let you know how I get on.

I went to the Authors' site and downloaded the Template, it is an HTML with CSS enhancement.

(Edited: 27NOV2010, removed: accepted invitation)
zpcs
Hi Gareth,
I did a little volunteer work for the scouting web, (atta boy Gareth!) concerning that rounded top for the Homepage. The attachment file: bg_content-top.jpg. The attached file can replace the existing rectangle - it's all yours! (hint: to download the picture mouse over the line in the black and when your cursor turns into the "hand": Right-mouse click on it and then select "Save Picture as ...")
Click to view attachment
If this new attached file rounded corner white top is used (it would need to be uploaded into the images folder at the Web Account) the current Homepage code line:
CODE
<img src="images/bg_content-top.png" alt="white top" width="780" height="15" />

would need to be modified (or, be replaced by commenting out the existing <img src="...bg_content-top.png..."/> to call the new file: bg_content-top.jpg
CODE
<img src="images/bg_content-top.jpg" alt="white round top" width="780" height="15" />

My Monitors Display Resolution is currently set at 1024 x 768 and I noticed that the horizontal navigation menu is a little off center too, try 179px for the #hornav { left:220px } in the Homepage file. Centering issues can be such fun ...
here's what it appears as with the above mentioned changes:


Some other suggestions:
Images always take a moment or two to load depending upon their filesize, there is the background (solid color) file named bg.jpg that is used in the body and throughout the various id=" " of the Homepage from the CSS file. This bg.jpg, as it is a solid color (#65C7B8), may be replaced with a background color in the CSS file.
Such a replacement will be a benefit as the image is no longer required and can be removed from the files needed for the display of the page and the page can be rendered a bit quicker. Another benefit to this is that the BODY of the page, which is currently callng for a background color of a dimmed yellowish-green (#8D927C) is eventually covered by this bg.jpg (the color shift when the page is first called to load). The line that could be commented out from the CSS file is basically:
background: url(images/bg.jpg) repeat;

The CSS files' codings that are affected by this change would be now be as follows:
CODE
body    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #FFFFFF;
    /* background: #8D927C url(images/bg.jpg) repeat; */
    background-color: #65C7B8; /* replaces: background: #8D927C url(images/bg.jpg) repeat; */
    margin: 0;
    padding: 0;
    text-align: center;
    }

#hornav ul li    {
    display: inline;
    margin: 0 2px 0 0;
    padding: 3px 0 3px 10px;
    /* background: url(images/bg.jpg) repeat-y; */
    background-color: #65C7B8; /* replaces: background: url(images/bg.jpg) repeat-y; */
    }

#hornav ul li a    {
    text-decoration: none;
    padding: 3px 10px 3px 0;
    margin: 0;
    /* background: url(images/bg.jpg) repeat-y; */
    background-color: #65C7B8; /* replaces: background: url(images/bg.jpg) repeat-y; */
    }

#wrapper-1    {
    /* background: url(images/bg.jpg) repeat-y; */
    width: 880px;
    margin: 0 auto;
    text-align: center;
    }

#wrapper-2    {
    /* background: url(images/bg.jpg) repeat-y; */
    width: 780px;
    margin: 0 auto;
    text-align: center;
    }


Not unlike the afore mentioned concerning images, the white background of #wrapper-3 may become handled in the same manner using a background color of white (#FFFFFF).
CODE
#wrapper-3    {
    /* background: url(images/Untitled.png); */
    background-color: #FFFFFF; /* replaces: background: url(images/Untitled.png); */
    color: #333;
    text-align: center;
    }


Just was taking it easy today and thought I'd give a few suggestions for the look of the ST MICHEALS 31st BELFAST SCOUT TROOP Web.
zpcs
Hi Heff,
On the vertnav (want to be hornav) in the CSS #menu { width: 0px; }, try setting the 0px value to say 780px. That should allow it to go horizontal, you may have to play with the number to get it just so.

Good luck with the color, the Homepages background color is #65C7B8.

Hope this helps you out.

zpcs
Hi Heff,
Looking good there at the site just had a look see at the display (I'll look at the sources in a bit to see what was accomplished).
Atta boy Gareth!
lizon
Without looking at your code i'm guessing one or both of these are missing from your content region's CSS code.

CODE
display: block;
float: left;


I'll download the site and take it home for me to look at it under the hood. Don't have time right now to do it.
heff
Thanks zpcs,

Got layout for most of the website the way i want it now. Just need the committee to agree on the content on each page now.lol. And I thought the hardest part was done.
heff
Thanks zpcs for all the help. Just need to fiddle around with a few things and add a bit of content and thats me up and running.

Heff
zpcs
Your Welcome Heff, Keep up the good work!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.