Community Forums › Forums › Archived Forums › Design Tips and Tricks › [Agency] CSS Not Showing in All Browsers
- This topic has 3 replies, 2 voices, and was last updated 10 years, 9 months ago by David Chu.
-
AuthorPosts
-
July 8, 2013 at 1:56 pm #49840MznataliaParticipant
Hi,
I have two questions. The site: activechildrenexcel.orgFirst, I have created an image to use as the background for the Agency theme. I wanted to make sure that the background would stretch and fill the browser no matter the browser or screen resolution, so I used the following code in CSS so that the image displays correctly in every browser:
body { background-image: url(images/acebg.png); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
When I look at Chrome, Safari, and Opera, the website displays as it should. However , when I look at it in Firefox and Internet Explorer, it doesn't display properly. When I look at the CSS in Firefly in those two browsers, it is only showing the following in the CSS:
body { background-image: url(images/acebg.png); background-repeat: no-repeat;
Is there something that I have incorrect in the code? It seemed to be working previously and all of a sudden stopped working.
Secondly, I had to change the position of the wrap to 1020px and the header right to 660px to compensate for the last item in the nav menu. I now notice however that the home middle and footer 2 are off center. Is there some way to fix this in the code?
Thanks!
http://www.activechildrenexcel.orgJuly 8, 2013 at 3:27 pm #49858David ChuParticipantHi,
I can take a shot at one of those. I use CSS3 sparingly, because many commands are not well supported. I've never even used the "cover" command yet, and I would not bet the farm on it by any means.However, the -moz prefix isn't even used with current Firefox, so maybe FF is balking at that. If you pull that out, it's possible FF will show the coverage using the plain background-size command. I just did it in Firebug, and it's working. That command with the -moz prefix only goes up to about FF 3, I think. My FF is at version 22, so you're pretty safe in dumping the -moz prefix, I'd say... I haven't used it in ages. I doubt you'd even need -webkit for Chrome anymore, either, and a quickie test I did with that code inspector bore that out.
So ironically, whatever article you're looking at is out-of-date code, yet it's using a futuristic command that's not used much yet.
I can tell you this, too. If you use a 2M background image, your troubles are going to be way more significant than the above... your site will probably load very slowly. You would benefit from optimizing that image big time, sacrificing a bit of quality, but making the site usable.
Good luck,
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
July 8, 2013 at 5:38 pm #49893MznataliaParticipantThanks Dave,
After removing the -webkit and -moz prefixes, the background is displaying on all browsers properly. I also optimized the background, something I'd planned to do but had forgotten and was able to reduce the size 70%.
Thanks again!
NatalieJuly 8, 2013 at 5:55 pm #49896David ChuParticipantNatalie,
Glad to hear it. Sounds like you're cruising now!
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.