bijoume bijoume - 1 month ago 10
CSS Question

Positioning shapes to website

I have made a red svg shape which looks like that:

enter image description here

I need to use these shapes in a design which looks like this:

enter image description here

I've embedded this svg file in img tag and tried to position it with absolute/relative positioning and ended up with that:

enter image description here

It looks perfect but when I resize my browser, this happens:

enter image description here

I'm new to HTML/CSS and obviously don't know what I'm doing. Maybe this is the wrong way to approach it...

So here's my HTML:

<section id="whatwedo">
<div class="hat"><img src="img/hat.svg" alt="Startup" style="img-responsive;"></div>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">what we do</h1>
<p class="text-center">We offer a wide range of software development and design options from a simple web development to more complicated information systems. We ensure our customers get the right thing, done the right way.</p>
</div>
<!--end col-md-8 col-md-offset-2-->
</div>
<!--end row-->


<div class="row fields">
<div class="col-sm-4 development-field">
<img src="img/development.svg" alt="Development" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">develop</h2>
<p class="small text-center">We take pride in our experience in developing Java and PHP applications with different technologies and frameworks.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
<div class="col-sm-4 design-field">
<img src="img/design.png" alt="Design" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">design</h2>
<p class="small text-center">Beauty. Simplicity. Delight. We create beautiful user experiences to solve our customers’ business problems.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
<div class="col-sm-4 startup-field">
<img src="img/startup.svg" alt="Startup" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">startup</h2>
<p class="small text-center">We love being a part of new innovation and help your startup succeed by developing the technology you need to push forward.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
</div>
<!--end row fields-->
</div>
<!--end container-->

</section>
<!--end whatwedo-->


And here's the CSS:

/*what we do*/

.fields {
margin-top: 64px;
}

.development-field img,
.design-field img,
.startup-field img {
margin-bottom: 32px;
}

#aboutprocess {
margin-top: 64px;
padding: 64px 0;
background: url(../img/tech_bg.jpg) repeat center center fixed;
width: 100%;
height: 344px;
background-size: contain;
}

#aboutprocess p {
color: #ffffff;
padding-top: 60px;
}

.hat {
width: 100%;
position: absolute;
left: 0;
top: -110px;
}

#whatwedo {
position: relative;
}


I hope you guys can help me out. I've been working on this for 3 hours already and I feel like I'm gonna go crazy soon. Here's a link to a demo page as well. Thank you.

Answer

I made a sample, based on what you said. I made a small change in the HTML and CSS structure.

I have helped you in any way

#home {
  width: 100%;
  height: 100vh;
	position: relative;
  background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url("http://dolm.ragne.me/img/landing_bg.jpg") no-repeat 0 0 fixed;
  background-size: cover;
}
.hat {
	width: 100%;
  height: 130px;
	background: url("http://dolm.ragne.me/img/hat.svg") no-repeat center bottom;
  background-size: contain;
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="home">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>Heading sample</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <button type="button" name="button" class="btn btn-primary">Click me</button>
      </div>
    </div>
  </div>
	<div class="hat"></div>
</section>

<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>Heading sample</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repudiandae illum ipsum voluptatibus eos magni est rem, quae recusandae. Sequi, quae voluptatum alias adipisci, quas repudiandae eveniet et quis placeat.</p>
      </div>
    </div>
  </div>
</section>

Comments