16 replies [Last post]
abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

For some reason firefox is ignoring my background properties:

background:url(../images/top-what-we-do.jpg);
background-repeat: no-repeat;
background-position: top;

I have also added:

background-attachment: scroll;

but this doesent help.

Can anyone help me?

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 9 years 24 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

please try background-image

please try background-image: url(../images/top-what-we-do.jpg);

if this doesn

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

actually crea, it would be

actually crea, it would be better if the op used only the shorthand method

background: url(../images/top-what-we-do.jpg) no-repeat top;

abis123, please read the stickies, you need to provide all of your code (both html and css) in <code> tags, or better still a live link.

I'll take a wild guess and assume you're placing the background on an element that has floating children and you haven't contained said floats.

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 9 years 24 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

hi wolfcry911, wolfcry911

hi wolfcry911,

wolfcry911 wrote:
actually crea, it would be better if the op used only the shorthand method

background: url(../images/top-what-we-do.jpg) no-repeat top;

Of course you

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

technically it should work,

technically it should work, but there are instances in some older browsers where the shorthand background rule works while the individual multiple background rules don't.

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

OK, heres my code and css

index.html:


@import "stylesheets/main.css";
@import "stylesheets/colours.css";











Colours



---------------------------

main.css

html { height:100%; max-height:100%; padding:0; margin:0; border:0; font-size:15px; font-family:arial, tahoma, times new roman; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ }

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:150px;
bottom:52px;
width:700px;
margin-left:-350px;
left:50%;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:702px;
border-top:152px solid #fff;
border-bottom:50px solid #fff;
}

#head {
position:absolute;
margin-left:-350px;
left:50%;
top:0;
width:700px;
min-width:700px;
height:150px;
background:#fff;
font-size:1em;
z-index:5;
border:1px solid #000;
}

* html #head {
top:0px; width:702px; height:150px;
}

a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7, a.nav8
{
width:100px;
height:150px;
display:block;
float:left;
background:url(../images/heading.gif);
text-align:center;
font-size:0.9em;
font-weight:bold;
color:#000;
text-decoration:none;
font-family:arial, tahoma, times new roman;
line-height:25px;
overflow:hidden;
}

#head a .pad
{
display:block;
width:100px;
height:125px;
background:transparent;
border-bottom:1px solid #000;
}

a.nav1 {background-position:0 150px;}
a.nav2 {background-position:-100px 150px;}
a.nav3 {background-position:-200px 150px;}
a.nav4 {background-position:-300px 150px;}
a.nav5 {background-position:-400px 150px;}
a.nav6 {background-position:-500px 150px;}
a.nav7 {background-position:-600px 150px;}
a.nav8 {background-position:-700px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {background:#FF0000; color:#fff; cursor:pointer; display:block; width:100px; height:25px; cursor:hand;}
a.nav2:hover {background-position:-100px 0;}
a.nav2:hover .button {display:block; width:100px; height:25px; background:#FF9900; color:#fff; cursor:pointer; cursor:hand;}
a.nav3:hover {background-position:-200px 0;}
a.nav3:hover .button {display:block; width:100px; height:25px; background:#FFCC00; color:#fff; cursor:pointer; cursor:hand;}
a.nav4:hover {background-position:-300px 0;}
a.nav4:hover .button {display:block; width:100px; height:25px; background:#33CC00; color:#fff; cursor:pointer; cursor:hand;}
a.nav5:hover {background-position:-400px 0;}
a.nav5:hover .button {display:block; width:100px; height:25px; background:#0066CC; color:#fff; cursor:pointer; cursor:hand;}
a.nav6:hover {background-position:-500px 0;}
a.nav6:hover .button {display:block; width:100px; height:25px; background:#6633CC; color:#fff; cursor:pointer; cursor:hand;}
a.nav7:hover {background-position:-600px 0;}
a.nav7:hover .button {display:block; width:100px; height:25px; background:#FF33FF; color:#fff; cursor:pointer; cursor:hand;}
a.nav8:hover {background-position:-700px 0;}
a.nav8:hover .button {display:block; width:100px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}

#foot {
text-align:center;
position:absolute;
margin-left:-350px;
left:50%;
bottom:0;
width:700px;
min-width:700px;
height:50px;
font-size:1em;
z-index:5;
border:1px solid #000;
font-family: arial, tahoma, times new roman;
font-weight:bold;
color:#000;
}

* html #foot {
bottom:0px; width:702px; height:50px;
}

#content p {
padding:5px; text-align:justify;
}

.boldhead {
font-size:1.5em;
font-weight:bold;
}

.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

.page-title {text-align: center; font-size: large;}
.justify-text {text-align: justify; margin: 10px;}
.left-picture {float: left;}
.right-picture {float: right;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

.p {position:relative; text-align:justify; z-index:20;}

.address
{
padding-left:150px; text-align:justify; z-index: 21; position: absolute;
}

.address-title
{
padding-left:5px; text-align:justify; z-index: 15; position: absolute;
}

.blasting-booth-text
{
padding-left:5px;
position:absolute;
}

.coating-text
{
padding-left:55px;
position:absolute;
}

.staff-text
{
padding-left:105px;
position:absolute;
}

.oven-1-text
{
padding-left:155px;
position:absolute;
}

.oven-2-text
{
padding-left:205px;
position:absolute;
}

.finishing-text
{
padding-left:255px;
position:absolute;
}

---------------------------

colours.css

a.nav4 .button { background:#33CC00; color:#fff; cursor:pointer; display:block; width:100px; height:25px; cursor:hand; }

#head {
background:#33CC00;
}

#content {
background:url(../images/top-colours.jpg);
background-repeat: no-repeat;
background-position: top;
}

.colour_code
{
width: 25%;
}

.description
{
width: 25%;
}

.hex_colour_code
{
width: 50%;
}

Thanks people! Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I don't see anything with

I don't see anything with background-attachment: scroll in the code you've posted above. What I do see though is far too much absolute positioning.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

Updated code

The code I posted was after I got rid of the background-attachment: scoll as it did not work. I placed it here though:

colour.css

a.nav4 .button { background:#33CC00; color:#fff; cursor:pointer; display:block; width:100px; height:25px; cursor:hand; }

#head {
background:#33CC00;
}

#content {
background:url(../images/top-colours.jpg);
background-repeat: no-repeat;
background-position: top;
background-attachment: scroll;
}

.colour_code
{
width: 25%;
}

.description
{
width: 25%;
}

.hex_colour_code
{
width: 50%;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How about a link to the page

How about a link to the page instead of having to paste all the bits together (and not being able to see any of the images)?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

Unfortunatly I do not know

Unfortunatly I do not know of anywhere to host asp.net pages for free and so dont have any way of allowing you to view my pages.

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

Posted online

OK, I have my website hosted online.

http://ducktapemyface.brinkster.net/garie-bevan-coatings/gallery.aspx

Many thanks for anyone who can help. You need to preview a page in firefox, that makes the main part of the page require a scroll bar, then you will see what I mean.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm sorry, but I don't

I'm sorry, but I don't really get what the problem is. Can you describe it in more detail?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

Sorry about that, on any

Sorry about that, on any page on my website there is the main Garie Bevan Coatings title, then below that there is the navigation bar, then below that there is an image (which fades into the page). The problem is that this background doesent scroll with the page in Firefox.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The link you've provided's

The link you've provided's got no content in it so what I see looks exactly the same in FF & IE.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

New URL

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you move the bg-image

If you move the bg-image from #content to .page-title it should solve the issue.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abis123
Offline
Regular
Last seen: 10 years 25 weeks ago
Timezone: GMT+1
Joined: 2007-04-15
Posts: 18
Points: 2

Thank you very much. I

Thank you very much. I haven't been on this site for quite some time. That fixed it and I'm extreamly grateful!!!