Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Mar 2014
    Posts
    5
    Member #
    38688

    Just signed up and have a question.

    Hey all first time poster. Just signed up here. Hello all!! So I am working on a website. Been a few years since I have done one. I am currently working with HTML5 and CSS3. Let me start off by saying I am not a web designer. Its always something I wanted to learn. I have a business idea and it involves a website, so here I go again. I designed my own website about 5 years ago when I ran a computer repair business and things have changed quite a bit. Actually I don't even think HTML5 or CSS3 were available then.

    First off let me start off by saying that I do understand some of the lingo but not nowhere near what I am sure a lot of you know.

    I hope to use some of your expertise in times of getting stuck. Also I would like to thank everyone who reads this post (and I am sure many more to come) and takes time to answer some of the question I may be asking in the future.

    Ok, so now on to my question. Its basic, I think. So putting all the html aside and just talking css3, here is where I am stuck. I am working with css3 gradients. Without putting anything on the page I just want to have a background with a gradient. Now reading about these it seems basic but it is not working correctly for me. I just want to see the background only to see what it would look like with no words or other stuff to get an idea of whether or not I like it.

    The problem lies in that when I put the code in the css3 file it only shows in spurts when I type something on the page.

    Here is my code in css3.

    #container

    {

    background: rgb(30,87,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9w IG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3 Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUi IHN0b3AtY29sb3I9IiMyOTg5ZDgiIHN0b3Atb3BhY2l0eT0iMS IvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9 IiMyMDdjY2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3 Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBz dG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50Pg ogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBo ZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZX JhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progidXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

    }

    When I put this with the div listed it shows nothing on the page. However lets say I add an H1 element the background will show up, not on the whole page but just limited to say 50px box across the screen. I have the container set for a width of 100% which is what I want the display to do.

    Now that being said, I got this code from some of the generators on the net. Which ever one I use I have the same problem. What am I missing? is the url listed throwing things off? It looks weird. Also when I do just a plain color background I have no problems. So I must be coding something wrong. Also, do these code generators just set the code for lets say 50px and its something I have to physically change. It just doesn't make sense to me why it wont show up unless I put text or something in on the page.

    Thanks for your time.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Where's the site this is on? Sounds on the surface like you need to add display: block; to the container.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Mar 2014
    Posts
    5
    Member #
    38688
    Hey game. The sites not up. I'm coding it in notepad. I will give that block feature a try later tonight when I get home.

  5. #4
    Junior Member
    Join Date
    Mar 2014
    Posts
    5
    Member #
    38688
    Ok here's a follow up. I tried it before I went to work this morning. The block didn't work. But what I noticed is when I set height to 600px the image displays. When I set the height to 100%. The image only shows when I insert text into the home page at 50px. Is there something with the 100% only being valid when their is text installed? Again thanks for reading and responding.

  6. #5
    Junior Member
    Join Date
    Mar 2014
    Posts
    5
    Member #
    38688
    I meant the html page. Sorry typed this on phone.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Those generators just set the gradient, they don't do anything with the height. Here's the deal. By default, the body is only so big as its contents, so a div with nothing in it that is set to 100% height will only go to the height of its container, which I'm assuming is <body>. Because there is no content, body's height is nothing. The height of <html>, IIRC should be set to the height of the viewport, so if you set body's height to 100%, it should expand. Of course, in that case, there's no need for #container to begin with.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Also, if you don't have a server to put it on, try using a code service like Codepen or JSFiddle.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com