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
    594
    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,945
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    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,945
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    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,945
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    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
  •