Web Analytics Made Easy -
StatCounter Centerd container outer background image - CodingForum

Announcement

Collapse
No announcement yet.

Centerd container outer background image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Centerd container outer background image

    Hi there, I'm a beginner at css, and I am wanting to put a background behind my centerd container, but my container image is classed as the background image on my body section in my css code, to view my website click here.

    What I am wanting is an image background to be displayed on the left hand colum and the right hand colum, both ends of the container, if you know what I mean.

    I have tried to put the container settings in a new point: .container and put the container image in there, and I put my image background in the body section, but this became messed up and didnt work out.

    Does anyone know how I could solve this problem?.

    Thanks for any replys and if you dont understand something that I have put I will be happy to re-word it!.

  • #2
    Can you share image.. how it should look... it will easy for us to understand.

    Comment


    • #3
      Hi there, many thanks for replying!.

      Here is a preview of what I want:



      The problem is, is that the centerd-container has a border image, as you can see if you click here.

      I cant think of any other way how to set that background image?.

      Again, many thanks for replying!.
      Last edited by camzenxbt; Aug 24, 2011, 05:34 PM. Reason: Image size was too big

      Comment


      • #4
        Set desired background to body and set background-color to white to container..

        Comment


        • #5
          Make sure where the container image has the gradient fade that it's transparent, then in the container, the CSS would be:
          Code:
          html, body {
          height: 100%;
          }
          .container {
           width: 1054px;
          margin: 0 auto;
          background: #fff url(images/site-border.png) repeat-y;
          min-height: 100%;
          height: 100%
          }
          You also don't need to make it that tall as you did (650px). You can make it like 5px or 2px tall, since it's a seamless repeated pattern, that will make it a small sized file.
          WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

          Comment


          • #6
            Hi there, many thanks for replying!,

            I have tried your code but it was unsuccessful, what I did is I pasted your code into my css file and set the div container in my html file, but the result was the page displaying the whole image background (the background i only wanted to display as outside the container), as you can see if you click here. Do you know why this happened?.
            Last edited by camzenxbt; Aug 28, 2011, 09:22 AM.

            Comment

            Working...
            X