7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

How Do I Add An Additional Background Image To My Site Using CSS?

by gregdavidson727
6 replies
  • WEB DESIGN
    • |
Below is the CSS that I use to add a dropshadow to the left and right of my website. As you can see I use an image instead of CSS to make it compatible with older browsers. One thing I can't figure out is how to add an additional background image. I want a large image in the background as well as the dropshadow on the left and right.

Code:
background:#FFFFFF url(images/bg.jpg) repeat-y center;
#add #additional #background #css #image #site
  • Profile picture of the author poobar1
    Depends on your limitations for html usage, but normally I'd probably just put another div inside and give that your different background image?
    {{ DiscussionBoard.errors[9402410].message }}
  • Profile picture of the author fixie
    You can do it like this:

    Code:
    <div class="class1">
<div class="class2">
<p>Insert your content here</p>
</div>
</div>
    and in css:

    Code:
    .style1 {background:#FFFFFF url(images/bg.jpg) repeat-y center;}
.style2 {background:#FFFFFF url(images/bg2.jpg) ;}
    Signature
    Website Maintenance Services & Front End Web Development
    {{ DiscussionBoard.errors[9402565].message }}
    • Profile picture of the author Mr Bill
      Originally Posted by fixie View Post

      You can do it like this:

      Code:
      <div class="class1">
<div class="class2">
<p>Insert your content here</p>
</div>
</div>
      and in css:

      Code:
      .style1 {background:#FFFFFF url(images/bg.jpg) repeat-y center;}
.style2 {background:#FFFFFF url(images/bg2.jpg) ;}
      Do you mean "class" not "style"?

      Code:
      .class1 {background:#FFFFFF url(images/bg.jpg) repeat-y center;}
.class2 {background:#FFFFFF url(images/bg2.jpg) ;}
      ?
      {{ DiscussionBoard.errors[9403475].message }}
  • Profile picture of the author poobar1
    Yep, that's what I was suggesting, although without the much more illustrative example.
    {{ DiscussionBoard.errors[9403013].message }}
    • Profile picture of the author jobgurus
      create a parent div with the image for the background .
      {{ DiscussionBoard.errors[9403426].message }}

Trending Topics