12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

I just learned how to put 2 bg images on a page!

by RedMatrix
10 replies
  • WEB DESIGN
    • |
Hey fellow warriors!

If any of you have ever wanted to put two backgrounds in the BODY of a web page with CSS, but never could....

I found a way to do it! It's easy now that I think about it.

Just put some attributes to the HTML anchor. Like this:

Code:
html {background:#8385c3 url(images/html_bg.png) repeat-y top left;}
body {background: url(images/body_bg.png) no-repeat top right; }
The image used for the body, will be on top of the image used for the html. So now you can have a gradient and 'tile' image.

Just wanted to share what I just learned. Hope it helps some of y'all.

dave
#images #learned #page #put
  • Profile picture of the author donaldclifton
    Dave,

    Thanks for sharing. I do most of my own website design and it's always nice to pick up some hints here and there.

    This is one I'm now going to copy and use.

    Appreciate you sharing.

    Don Clifton
    {{ DiscussionBoard.errors[543357].message }}
  • Profile picture of the author RedMatrix
    I'm glad I have helped you donald.

    Just a caveat, when someone right-clicks the "background," No matter the HTML or BODY image, they will only get the body's image information. You know, "View Background Image" in the right-click menu?
    Signature

    ~Dave

    {{ DiscussionBoard.errors[543429].message }}
  • Profile picture of the author grangonzo
    Very nice info, thanks a lot!

    Just applied it in my website wooohooo, LOL!
    Signature
    Lawyers News
    Free Advertising
    Tecnologia
    {{ DiscussionBoard.errors[544982].message }}
  • Profile picture of the author bz1406
    Thank for the tips....
    {{ DiscussionBoard.errors[545718].message }}
  • Profile picture of the author Steve Mount
    Could you provide an example site that uses this? I'm not understanding what the advantage of this is.
    Signature
    FREE AFFILIATE MARKETING TRAINING Reveals How To Earn $3880/month With Affiliate Commissions.. 100% Free!
    {{ DiscussionBoard.errors[546135].message }}
  • Profile picture of the author RedMatrix
    Steve, the advantage is to have smaller image loads, while maintaining a complex design.

    I don't have an outright example right now. Imagine that you wanted a pattern in the background, as well as a fade (gradient). Without two small images that tiled (repeated) over and over, one of the effects would be a big image, and the other a tile.

    You could also tile two different images down each side of the screen (or top and bottom).
    Signature

    ~Dave

    {{ DiscussionBoard.errors[546729].message }}
  • Profile picture of the author RedMatrix
    Okay, I am now using this method on my DROM website (in sig).

    You can see the stars by right-clicking the background and viewing image, but you cannot see the HTML background image, which is a gradient. (light to dark, left to right)
    Signature

    ~Dave

    {{ DiscussionBoard.errors[554103].message }}
  • Profile picture of the author odellj
    That is my favorite tip this year, thanx
    Signature
    SEO Tips
    {{ DiscussionBoard.errors[555482].message }}
  • Profile picture of the author pavondunbar
    RedMatrix:

    Thanks for this awesome tip!

    I do web design work and this tip is a great tool to have in the toolbox.

    Pavon
    Signature
    Cost Effective Mobile Marketing For You & Your Business
    {{ DiscussionBoard.errors[555523].message }}
  • Profile picture of the author Richard Whyte
    If you are using CSS, you can set the position of an image and the z-index.

    With z-index, the higher the number, the higher it is in the "stack".... Meaning an image with z-index of 10 and another with z-index 20, the image set to 20 will sit on top of the one with 10.

    This is very handy to be able to do complex designs and layouts.

    If you go to w3schools.com and look at the CSS reference on the right hand side... Look up "positioning" and then z-index and you will see the code needed to use this feature.

    CSS makes web pages much better to work with and design so very cool looks.
    {{ DiscussionBoard.errors[556460].message }}

Trending Topics