How to create Multiple Background using css

6 replies
  • WEB DESIGN
  • |
Hi all..

I am newbie in css, I just want to know how could we create multiple background left and right header using 1 image ? :confused:
#background #create #css #multiple
  • Profile picture of the author ussher
    with CSS there are LOTS of different ways to do it.

    I dont really understand exactly what you are trying to do from your description, but if you want the same image on the left and right the add 2 div's to your page and set the image to the background of both and float one left and one right.

    If what you want is one image file with 2 images on it which display different in different locations then you will need to use the 2 fixed width div's and background positioning to get the different position on the image to display differently in each div.
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3835288].message }}
  • Profile picture of the author filthy
    Use div function and image tags in it with left,right or center justifications.
    {{ DiscussionBoard.errors[3836526].message }}
  • Profile picture of the author escortbayan
    Banned
    but tell me what you want at the real... must backgrounds change at the refresh... or they must be change with a time for ex: 10 second
    {{ DiscussionBoard.errors[3836571].message }}
  • Profile picture of the author Sohel Parvez
    if you want to use one image then background-repeat:repeat-x or y;
    {{ DiscussionBoard.errors[4296254].message }}
  • Profile picture of the author soflanetworking
    any chance someone could post example code of this?
    {{ DiscussionBoard.errors[4303329].message }}
    • Profile picture of the author LikeDaddy
      untungsupriono (and soflanetworking),

      If untungsupriono's question is taken literally, and a single image is to be exhibited more than one time, with a single call, spanning an entire header of any length from left to right, the following CSS would satisfy the task. Speciifically, a single small background image can be made to appear many times thereby filling a much larger container.


      div.header {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      height: 85px;
      width: 850px;
      color: #ffffff;
      background-color: transparent;
      background-image: url('image_to_be_repeated.png');
      background-repeat: repeat-x;
      border: none;
      }
      {{ DiscussionBoard.errors[4304473].message }}

Trending Topics