Help with positioning of backgroud images
# November 28, 2012 at 1:06 am
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
background: url(“/images/pageimages/mainwindowpic.jpg”)repeat-x , repeat-y scroll 0 0 transparent ;
background: url(“/images/pageimages/reg_form_background2.jpg”) ;
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.
Edit/Delete Message# November 28, 2012 at 3:56 am
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.
Andreea115# November 28, 2012 at 4:00 am
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
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
Andreea# November 28, 2012 at 9:38 am
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:# 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 “.
You must be logged in to reply to this topic.