Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with positioning of backgroud images

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #41031
    andreea115
    Participant

    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

    #115710
    Paulie_D
    Member

    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?

    #115721
    andreea115
    Participant

    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

    #115722
    Watson90
    Member

    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.

    #115774
    andreea115
    Participant

    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

    #115775
    andreea115
    Participant

    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

    #115781
    Paulie_D
    Member

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

    #115790
    andreea115
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.