Grow your CSS skills. Land your dream job.

New to CSS. Help with BG image

  • # December 3, 2008 at 2:33 pm

    Hello. I’m a long time designer with some background in HTML (mainly from the late 90s), but I’m pretty strong in it. However, I’m finally trying to jump on the "modern web design" bus and CSS looks like it should be the perfect place for me to dive into next.

    Now to my problem. I’m developing my own website while learning CSS. So far the page only contains two elements: a background which scales proportionately width-wise and an alpha-transparent PNG which is page wrapping (centering) depending on the size of the browser window.

    Currently my background is displaying OVER the PNG. I’ve tried z-index flags, but nothing is working. I’ve even tried to place the background image into the body tag, but I lose the scaling when i do that.

    Anyways, I’m hoping someone can point out what I’m missing. Am I close to the solution or miles away? Thanks in advance! I’m loving this site.

    Mockup: http://www.electricalienstudios.com/spec/site-design.jpg
    Page in broken action: http://www.electricalienstudios.com/spec/index.html

    pab
    # December 3, 2008 at 3:24 pm

    Hi,

    you have to put your image in the css and not inline.

    so you can do something like

    body {
    background-color:#fff;
    font-family:Georgia,serif;
    font-size:62.5%;
    background:url(the path to your background) no-repeat; /* or what ever you want to do with it*/
    background-position:fixed;
    }

    same applies for your other image for your div.

    hope this helps. nice background image by the way.

    pab

    # December 3, 2008 at 4:33 pm

    Thank you for the response.

    I took what you recommended and I’m happy to see the images stacking in the right order now.

    However, the new problem I’m running into is with the background image now in the BODY tag, I can’t seem to get it to scale with the width of the page. Now I do have the positioning working correctly, but now I will run into the problem of the sides of the image showing when the browser is too wide.

    This may be a newb question… but can I call an element inside of an element? For example, can I give BACKGROUND properties elsewhere in the CSS other than the BODY tag? And how do I link this particular BACKGROUND to the BODY?

    Rob
    # December 3, 2008 at 4:47 pm

    to be honest I dont think I have ever seen a backgound image that does scale, creating scaling things within websites is always a little dodgy… its hard enough making the static stuff browser compatible! Most people would create a fixed image, and I would recomend that for you too… it will save you alot of heatache and hairloss :)

    # December 3, 2008 at 4:59 pm
    Quote:
    However, the new problem I’m running into is with the background image now in the BODY tag, I can’t seem to get it to scale with the width of the page.

    There’s currently no way to stretch a background image. CSS3 has a background-size property which can achieve the stretching effect, but it’s only supported in Opera, Safari, and Konqueror.

    Quote:
    This may be a newb question… but can I call an element inside of an element? For example, can I give BACKGROUND properties elsewhere in the CSS other than the BODY tag?

    Absolutely. You can apply a background image to pretty much any element. For example, if you want a background on any paragraph:

    Code:
    p {background-image: url(‘../images/bgimage.jpg’);}

    Or, if you want to get specific (an element inside of an element):

    Code:
    div#container p div.box {background-image: url(‘../images/bgimage.jpg’);}

    That will apply a background image only to divs with the ID "box" inside of paragraphs that are inside a div with the ID "container." Etc.

    # December 3, 2008 at 5:21 pm

    Your best bet is to modify the bg image a bit so that either A) it will repeat seamlessly, or B) it has a gradient or something that transitions to a solid color, so if someone has an execptionally wide screen they would see the solid color on either side of the image. Then you can position the bg centered, so that those edges are only seen if the browser is too wide.

    # December 3, 2008 at 7:37 pm

    Thanks for all the helpful advice. I’ve decided to do just what you recommend and it’s working beautifully locally.

    # December 4, 2008 at 3:25 pm

    Looks good here too. :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".