Forums

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

Home Forums CSS Background Image position

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #33611
    HFM
    Member

    Hey guys,

    New to the forum here and what better way to introduce yourself than showing you my problems with CSS.

    I’ve started to create my own portfolio (well, I say started… you say typed three lines in CSS :P)

    Anyway, what I’m trying to accomplish is 2 types of background [1 jpg stretched to 100% width and height and 1 png pattern centered and repeating] behind a centered content of x width and height.

    Before adding the ‘content’ div, things were actually going smoothly and both images aligned perfectly.

    But after adding the content, which is vertically centered with:

    #content{
    top:50%;
    margin-top:-300;
    height:600px;
    {

    the png background also moves 300 pixels up.

    Link to my site…

    Now I’ve tried several things to make the png ‘ignore’ the margin-top but so far to no avail.

    Do you guys have any tips and/or tricks to make this work?

    Hugo

    #83887
    SgtLegend
    Member

    Yep sure do, instead of using a relative position use an absolute position so you end up with something like the below selector.

    #content {
    height: 600px;
    left: 50%;
    margin: -300px 0 0 -450px;
    position: absolute;
    top: 50%;
    width: 900px;
    }
    #83889
    HFM
    Member

    Ah, thank you!

    Solved it with


    #content{
    position:absolute;
    top:50%;
    margin-top:-300px;
    left:50%;
    margin-left:-450px;
    height:600px;
    width:900px;
    background-color:#000000;
    z-index:2;
    }

    Many thanks ^^

    ***

    Can i mark this topic as solved somewhere? It was there with the first post, but I can’t edit it anymore…

    #83891
    chrisburton
    Participant

    You can’t edit the title of the post?

    #83892
    HFM
    Member

    Nope, first comment is off limits to me :)

    #83894
    chrisburton
    Participant

    What about going to “My Discussions”, hover over this post, click options, edit, scroll down to “Mark as Solved”?

    #83895
    HFM
    Member

    clicking options > edit gives me this:

    Permission Problem
    You don’t have permission to do that.

    #83898
    chrisburton
    Participant

    I’m not sure, then.

    #83925
    TheDoc
    Member

    Still trying to figure out the issue. Have done it for you.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.