Grow your CSS skills. Land your dream job.

Help with positioning of backgroud images

  • # November 28, 2012 at 1:06 am

    Hello everyone

    i need a little help with my positioning of two background images- each of the images is stacked upon the other.

    Both images are held within their own div tag; but the 2nd image’s div tag is contained within the div tag of the first ( it is a smaller images).

    The problem that i have is that the CSS Rules ( the Margin Function) for the 2nd Image is now affecting the css rules for the first main image: i am not clear why this is happening as the second image is contained within the div of the first image and should not therefore affect it.

    it might help at this moment if i showed u my rules.

    The Div Tags

    THE CSS CODE

    #midbody_mainpage{

    background: url(“/images/pageimages/mainwindowpic.jpg”)repeat-x , repeat-y scroll 0 0 transparent ;
    height:399px;
    margin-top:0px;

    }

    .firstpage_regform {
    background: url(“/images/pageimages/reg_form_background2.jpg”) ;
    background-repeat:no-repeat;
    padding-top: 46px;
    padding-bottom: 0px;
    margin-left: 640px;
    height:292px;
    width:353px;
    margin-top:46px;

    }

    THE PROBLEM

    the margin-top from the div of the second smaller image (.firstpage_regform ) is causing the main div to pull down by 46px.

    Can anyone please recommend what i need to do.

    warm regards

    Andreea 115

    Edit/Delete Message

    # November 28, 2012 at 1:17 am

    Can you transfer this code of Codepen….remembering that we won’t be able to see the images unless they are on a web server?

    # November 28, 2012 at 3:56 am

    hi paulie_D

    thanks for your reply. sorry, i don’t understand ; what id codepen ? and what do you want me to transfer and where do you want me to transfer it to.

    sorry, i am new to this forum and don’t fully understand the terminologies or how to use the site.

    warm regards

    Andreea115

    # November 28, 2012 at 4:00 am

    Hi @andreea115

    Go to CodePen –> New Pen and fill in the relevant sections such as the all of the HTML markup in the left box, your CSS in the middle box and any JS in the right box.

    Also, you have referenced images in your HTML and CSS that are not displaying. They need to be live on a web server for us to see them.

    # November 28, 2012 at 9:34 am

    hi again everyone

    i am not sure if i did it correctly
    but here is the link to my codePen

    http://codepen.io/anon/pen/DBxil

    you will note that the background sky is being pulled down by the small picture on the right. the sky should be touching the upper boarder.

    i hope this is clear

    warm regards

    Andreea

    # November 28, 2012 at 9:38 am

    sorry

    one last point. i just realized that the pictures only show up in codepen. i tried viewing it in other browers but it did not work. i hope you are able to see the pictures. if not, the link below is a link to the site:

    http://www.babysitter-agency.com/testpage.html

    # November 28, 2012 at 10:00 am

    I confess, from your description, I’m having trouble working out what your problem is.

    Margins do not affect background images.

    I’ve tidied up your Codepen and re-organised the CSS into something more logical: http://codepen.io/Paulie-D/pen/yhzGJ and the Codepen reflects that.

    However, if I have it right you need to remove the margin-top from “.firstpage_regform” and add padding-top to “#midbody_mainpage “.

    # November 28, 2012 at 10:39 am

    Hi Paulie

    you are brilliant. thank you so much. It works perfectly. It is exactly what i want.

    Good lesson for me. thank you so much

    warmest regards

    Andreea

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".