Background image not responsive

1

Hi everyone, I have two questions that are related.

  1. I’m trying to make my portfolio responsive but I’m struggling quite a bit. I’m happy with the way my logo and my navigation bar behave when resizing the browser but I’m getting frustrated when it comes to my background image. It’s often too wide no matter what I tell it to do. Ideally, I’d like it to stop somewhere after the word “contact” in the navigation bar as I don’t want anything existing at the right side of this point but I’m confused as how to do that.

  2. When I resize my browser in my computer, everything looks fine (well except my background image for now) but when I take a look at my Codepen on my mobile phone, things don’t behave anymore, I see borders appearing or other things not displaying properly, why is that? I know we have to adjust to different screen sizes (that’s the whole point of a responsive website) but I thought if I just realigned my elements at the natural breaking points that it would look fine on all devices. Could someone enlighten me? Thank you for your time.
    Carl.

2

I tried

.header-img {
  background-image: url("http://res.cloudinary.com/dqww6uode/image/upload/c_scale,w_1280/v1518391373/Screen_Shot_2018-02-11_at_6.21.14_PM_uzmihr.png");
  width: 90%;
  height: 550px;  
}

Change the width with percentages to make it fluid.

1 Like
3

Thanks! I tweaked a few things based on making it fluid instead of fixed like you said and I’m pleased with the result. I appreciate the help :slight_smile: