Photoshop Question posted in
The official user guide can be found here.

How do I make my Image go above the Header – Photoshop

Hello I want my profile photo / image go over the header area but.
As you can see it is getting cut off.

enter image description here

I tried playing around with the code and I got close I also made the position absolute but it messes up the flex size 2 (for the about me section).

So how can i fix this without messing up the flex 1 and flex 2?
Right now I am using Sass

http://lonestarwebandgraphics.com/

enter image description here

html

<div id="about-me" >
    <div class="container">
        <div class="content-info p-2">
            <h1 class="section-title">About Me</h1>
            <p class="lead">Hello my name is Ruben Esquivel and my dad was a graphic designer so I grew up playing with 
                photoshop since I was a kid. For 10 years I worked as a remote graphic designer / web master running entire graphics department by myself providing mockups for getting sales and turning the mockups into print ready graphics to be printed.
                
                I am an expert in taking directions through phone or email and multi tasking multiple projects at once to meet the deadline. I can handle being under pressure and I am a master of hot keys so I can work fast when needed. 
                
                After working in the industry for 10 years I felt like I knew everything when it came to graphic design so I decided to learn web development because I love learning new things. I love coding and I love taking my web designs and creating beautiful eye catchy websites. To be honest I love both graphic design and coding, being able to take an idea and turn into a design or website is like creating magic for me.</p>

        </div>
        <div class="profile-pic">
            <img class="p-2" src="img/ruben-profile-pic_01.png" alt="Ruben Profile Photo" class="ruben-profile-photo">

        </div>
       
    </div>
</div>

CSS / SASS CODE

#about-me {
    // z-index: 50;
    // overflow: visible;
    // height: 100%;
    // background: red;
    margin-top: -3rem;
    position: relative;
    
    .container {
        // position: relative;
        display: flex;

        .content-info {
            flex: 2;
        }

        .profile-pic {
            flex: 1;
            margin-top: -5rem;
            // position: relative;
            // position: absolute;
            // right: 0;
            // z-index: 20;

        }

    }

}
Tags:

2

Answers


  1. 0

    I think it gets cut off because you have overflow: hidden specified for .container.
    An option would be to remove it and decrease a bit the padding of the image element, because it otherwise causes horizontal scrollbar to appear. A good idea might also be to use media queries for the padding, because width of the elements in the container is proportional to the resolution, but padding is not.

    Login or Signup to reply.
  2. 0

    You should play around with z-index

    .container{
position: relative;
z-index: 1;
}
.profile-pic{
position:absolute;
z-index: 2;
top:-25px;
}

    You can play around with the top element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search