Jump to content
Banner by ~ Wizard
Guidelines

technology CSS: "Full-screen" background cuts off

Kelario

By Kelario, User

 Share

Recommended Posts

Kelario

Kelario 95

(edited)

I found no forum for non-Poniverse tech support, so I post here.

 

I'm contracting with an event committee at school to spice up their webpage, which right now is just a few lines of text. My main goal is to set up a coloured, gradient background. By using CSS for the first time, I've accomplished that.

 

Now I have too much content to fit on just the screen, and it has to scroll. And beyond the point where the edge of the screen was, the background cuts off.

 

vD2SYMw.png

The solution I've found on Google is to use

background-size: cover;

but my editor does not recognize this, nor does Firefox apparently.

 

This is the file as it works (not including anything I've tried):

html {
height: 100%;
}
body {
height: 100%;
margin-top: 0;
margin-bottom: 0;
background: linear-gradient(
120deg,
#00008B,
#3D59AB);
background-repeat: no-repeat;
}

What am I doing wrong, and how can I fix it?

 

Thanks.

 

UPDATE: Have removed problematic content that would make it scroll, and page still insists on a need to scroll. How do I fix that?

Edited by Kelario

"[Hitler] was a political genius. He got half of Europe just by asking. He had Germany working and everything was in his favor. Then he dun goofed boi n he trid 2 DED the ppl and he bad."

img-2153314-1-through_the_fire_and_the_p
Signature by Rainbow Skywalker

Link to comment
Share on other sites
Kelario

Kelario 95

  • Author

You need to use the webkit gradient. A quick Google search of 'how to apply css gradient', yielded this result:

 

http://www.css3factory.com/linear-gradients/

 

Note, this is not compatible with Internet Explorer. That has never been a problem for me, I code for Chrome, Firefox, and other stable browsers.

 

This breaks the background - on Firefox.

"[Hitler] was a political genius. He got half of Europe just by asking. He had Germany working and everything was in his favor. Then he dun goofed boi n he trid 2 DED the ppl and he bad."

img-2153314-1-through_the_fire_and_the_p
Signature by Rainbow Skywalker

Link to comment
Share on other sites
Kelario

Kelario 95

  • Author

See, your code is different from what the generator gives.

 

And it also works. I just need to mess with some things. Thanks!

"[Hitler] was a political genius. He got half of Europe just by asking. He had Germany working and everything was in his favor. Then he dun goofed boi n he trid 2 DED the ppl and he bad."

img-2153314-1-through_the_fire_and_the_p
Signature by Rainbow Skywalker

Link to comment
Share on other sites
Katana

Katana 298

I personally blame "height: 100%". This is a little different from <html>'s default height property, and in my case it caused an annoying repeating background rather than a smooth one.

 

My solution, if you're not already set, is "min-height: 100%". background-size might have helped, but I think that's a very new property that not all browsers support.

 

 

 

Note, this is not compatible with Internet Explorer. That has never been a problem for me, I code for Chrome, Firefox, and other stable browsers.

Er...wrong. Internet Explorer has supported gradients since 10.0. It doesn't even need a "-ms-" prefix.

 

The manufacturer-specific prefixes ie -joe's-browser-shop-linear-gradient() are useful for backwards compatibility, but the most recent versions of all browsers now support the standard "linear-gradient" format. It's your choice whether you're aiming to support the older browsers as well.

 

Also: In case Google is giving you w3schools results (BOOO!) I highly recommend using the Mozilla Developer Network site.

https://developer.mozilla.org/en-US/

Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Join the herd!

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...