1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Related question

Discussion in 'Web Design' started by fatboy, Jun 13, 2012.

  1. fatboy

    fatboy Elite Member

    Joined:
    Aug 13, 2008
    Messages:
    1,618
    Likes Received:
    3,227
    Occupation:
    Retired
    Location:
    Old Peoples Home
    Hey all.

    Just a quick question really - I am trying to make a single page with a gradient background (top left -> bottom right) in CSS but also want a background image in the bottom right corner.

    Is this possible to do in CSS (or CSS3 now isn't it??)

    Sorry if this is a really numpty question, I have no web design talent at all and have been trying to read webpages on this.
    I can seem to get either the image in the corner or the gradient but not both together!!!

    Cheers
    FB
     
  2. webchick11

    webchick11 Newbie

    Joined:
    Feb 24, 2009
    Messages:
    37
    Likes Received:
    12
    Location:
    US
    What are you using to design the site - a content management system or straight html? That will make a difference in the answer.

    With Joomla or WordPress, just apply the image to a module in the bottom right, and specify the background in the css. It all depends on what cms and template you are using.
     
  3. fatboy

    fatboy Elite Member

    Joined:
    Aug 13, 2008
    Messages:
    1,618
    Likes Received:
    3,227
    Occupation:
    Retired
    Location:
    Old Peoples Home
    Its just plain old html.
    Been digging about and its getting there. Here is what I have but now I just want the image bottom right.....ideas appreciated!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */
    body {
    	background: #a5c9e5;
    	background: url(img.png) no-repeat 50% 300px, -moz-linear-gradient(top, #1e5799 0%, #a5c9e5 100%);
    	background: url(img.png) no-repeat 50% 300px, -webkit-gradient(linear, 0% 0%,0% 100%, from(#1e5799), to(#a5c9e5));
    	background: url(img.png) no-repeat 50% 300px, -webkit-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
    	background: url(img.png) no-repeat 50% 300px, -o-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
    	background: url(img.png) no-repeat 50% 300px, -ms-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
    	background: url(img.png) no-repeat 50% 300px, linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
    }
    </style>
    </head>
    
    <body>
    <p>Content</p>
    </body>
    </html>
    
    Copy and paste at its best :D
     
    Last edited: Jun 13, 2012
  4. ugjunk

    ugjunk Jr. VIP Jr. VIP Premium Member

    Joined:
    Jan 1, 2011
    Messages:
    2,340
    Likes Received:
    721
    Location:
    Los Angeles
    Home Page:
    • Thanks Thanks x 1
  5. fatboy

    fatboy Elite Member

    Joined:
    Aug 13, 2008
    Messages:
    1,618
    Likes Received:
    3,227
    Occupation:
    Retired
    Location:
    Old Peoples Home
    Ah don't worry - sorted it......easy this HTML ;)
     
  6. theAngle

    theAngle Junior Member

    Joined:
    May 19, 2012
    Messages:
    118
    Likes Received:
    53
    Occupation:
    Web Developer
    It's possible to do only with CSS 2.1, you don't need to use CSS 3 because won't work in all browsers, when I mean all browsers I also include IE6 to IE8. Just because CSS 3 requires a lot more work to put the site working in all these browsers.

    Actually, the only thing that you'd be needed from CSS 3 would be the multiple background property, but this feature doesn't work on versions below to IE9. To accomplish this you're going to need more work, there's no need for it, 'cause you can use CSS 2.1, instead.

    So, doing this with CSS 2.1 will be easier if you have a solid understand of CSS. The technique to use this is by the bullet-proof float-based-layout.

    All you gotta do is create some containers with 'div tag' and align them with the float property, then you add background the way you want, on them.

    This is a much faster and reliable technique.

    If you need more details, ask.
     
  7. regmant

    regmant Regular Member

    Joined:
    Jan 28, 2011
    Messages:
    337
    Likes Received:
    122
    Occupation:
    Web Developer
    Location:
    UK
    How did you fix it mate? Absolute positioning?
     
  8. brutusmaxi

    brutusmaxi Newbie

    Joined:
    Jun 22, 2012
    Messages:
    16
    Likes Received:
    0
    just watch older browser as it wont work in them
     
  9. Fastviews

    Fastviews Registered Member

    Joined:
    Jun 5, 2012
    Messages:
    62
    Likes Received:
    24
    Occupation:
    Being Creative
    Location:
    Europe / Worldwide affiliated
  10. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I am curious too, how did you accomplish this with html?