Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: css right left image issue

  1. #1
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css right left image issue

    Having an issue creating images. Would like one on right and one on left, ( over the main background image ) however, no matter what I place in, only shows on right, left but never both?

    I know I'm doing something wrong, just not sure what it is.

    Wordpress css


    Code:
    body {	
    	color:#cdc9c9;
    	font-size:12px;
    	font-family: 'arial';
    	position:relative;
    	background:url("images/back-body.jpg") top no-repeat;
              background: url("images/bg-left.png") no-repeat;
              background: url("images/bg-right.png") top right no-repeat;
              
    	
    
    
    	text-shadow:1px 1px 1px #202020;
    }

  2. #2
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    floating would also be great/ if possible so it moves with page when scrolled.

    Thanks in advance.....

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.


    It will make getting help a lot easier/faster
    Thanks,

    Bud

  4. #4
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    RE:

    [QUOTE=ajfmrf;295663]
    Please post a link to the page on your site that contains the problematic script so we can check it out.




    Sorry, I never know if they are allowed or not:

    kentuckyweedradio.com
    Last edited by Beverleyh; 06-04-2013 at 04:59 AM. Reason: Hotlink removed

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    It looks like the syntax is incorrect - multiple background values should just be comma-separated.
    Code:
    background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;
    See http://www.css3.info/preview/multiple-backgrounds/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    So would this be correct then?

    Code:
    body {	
    	color:#cdc9c9;
    	font-size:12px;
    	font-family: 'arial';
    	position:relative;
    	background:url("images/back-body.jpg") top  no-repeat,
              background: url("images/bg-left.png") top left no-repeat,
              background: url("images/bg-right.png") top right no-repeat;
    
    	text-shadow:1px 1px 1px #202020;
    }

  7. #7
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The above code , dose not show, right or left image?

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Quote Originally Posted by buxmike View Post
    So would this be correct then?

    Code:
    body {	
    	color:#cdc9c9;
    	font-size:12px;
    	font-family: 'arial';
    	position:relative;
    	background:url("images/back-body.jpg") top  no-repeat,
              background: url("images/bg-left.png") top left no-repeat,
              background: url("images/bg-right.png") top right no-repeat;
    
    	text-shadow:1px 1px 1px #202020;
    }
    No that's still not the correct syntax. Look carefully at the sample code I posted (from the linked resource) and you'll see that there is only one background property with multiple, comma-separated values listed after it. Here's that sample code again for reference;
    Code:
    background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Jun 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    worked! Thank you.

    If I may ask, where can I add float to keep inframe.

    Meaning when someone scrolls down the site, the two images

    right / left don't move.

    Thank you.

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    You just need to add the background-attachment value of "fixed" into your CSS shorthand. See here for reference: http://www.dustindiaz.com/css-shorthand/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 3
    Last Post: 01-01-2010, 03:09 PM
  2. Replies: 2
    Last Post: 11-17-2009, 12:29 PM
  3. left column issue
    By beth67 in forum CSS
    Replies: 1
    Last Post: 02-26-2009, 02:59 AM
  4. Left Column Issue with Fixed Layout #3.1
    By tennisguywill in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-31-2007, 04:44 PM
  5. Right-To-Left Flying Image = Left-To-Right??
    By peeb in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-07-2006, 07:13 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •