background image on one page

Asked

Viewed 80 times

0

Good morning Guys, I’m creating a site one page , but I’m having difficulty putting the background of the image filling the space 100%,how can I put the fixed background under the menu,filling all the space? I will use an image for each link. here is the codepen: https://codepen.io/x-gyba/pen/pNmbEe

html css

  • Dude, I don’t understand what you need. What image ? What menu ? Where do you want exactly ?

  • I need to do something like this image: http://www.urbaninfluence.com/wp-content/uploads/2015/uiblog-kfslider-ex.jpg

  • It was not very clear if you want to use the background in the sections or in the menu. If you are in the sections you can put the background and background-color together if you still want the colors, remember to leave an opacity for the image to appear. No need to use this tag with the photo1 class. You can discard it.

  • I want to do as in this image: http://www.urbaninfluence.com/wp-content/uploads/2015/05/uiblog-kfslider-ex.jpg

  • Put as background of Section then and not photo1

  • Thus: https://codepen.io/anon/pen/xgZVRX ?

  • This dude, but could shift the the href to the right to the left to include a logo?

  • yes, what you gave me solves, but I liked the solution presented, I just wanted to suggest some modifications.

Show 3 more comments

1 answer

0


With the menu on the right and then on the left. With the background images.

$(document).ready(function() {
  $('header a').click(function() {
    var section = $(this).attr('href');
    var speed = 750;
    $('html,body').animate({
      sholetop: $(section).offset().top6,
      speed
    });
    return false;
  });
});
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-timing-function: ease-out;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
h1 {
  color: #fff;
  font-weight: 600;
  text-shadow: #000 1px -1px 2px, #000 -1px 1px 2px, #000 1px 1px 2px, #000 -1px -1px 2px;
  text-align: center;
  margin: .67em 0;
}
header {
  z-index: 1;
  position: fixed;
  width: 100%;
  display: table;
  height: 60px;
  background: rgba(0, 0, 0, 0.1);
}
header a {
  font-family: 'Trebuchet MS', sans-serif;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px #222;
  display: inline-block;
  padding: 0px 30px;
}
header .logo {
  float: left;
}
header .menu {
  float: right;
}
.inner {
  min-height: 600px;
  position: relative
}
p {
  color: #fff;
  font-family: 'Trebuchet MS', cursive;
  font-size: 1.2em;
  font-weight: 600;
  text-shadow: 2px 2px #222;
  max-width: 700px;
  width: 100%;
  line-height: 10px;
}
.block {
  position: absolute;
  width: 100%;
  height: 10em;
  margin-top: -5em;
  left: 0;
  right: 0;
  margin: auto;
}
#slide1 {
  border: 1px solid #000000;
  padding: 160px;
  height: 80%;
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=SLIDE 1&w=1024&h=680');
  background-color: #0000CD;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
#slide2 {
  border: 1px solid #000000;
  padding: 160px;
  height: 80%;
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=SLIDE 2&w=1024&h=680');
  background-color: #00FF7F;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
#slide3 {
  border: 1px solid #000000;
  padding: 160px;
  height: 80%;
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=SLIDE 3&w=1024&h=680');
  background-color: #FF4500;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
#slide4 {
  border: 1px solid #000000;
  padding: 160px;
  height: 80%;
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=SLIDE 4&w=1024&h=680');
  background-color: #9400D3;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
#contato {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Logo&w=50&h=50">
  </div>
  <div class="menu">
    <a href="#slide1">Slide1</a>
    <a href="#slide2">Slide2</a>
    <a href="#slide3">Slide3</a> 
    <a href="#slide4">Slide4</a> 
    <a href="#contato" </a>
  </div>
</header>
<!--slide1 -->
<section id="slide1">
  <div class="inner">
    <div class="block">
      <h1> Montagem e Manutenção de PC</h1>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <div></div>
    </div>
  </div>
</section>
<!--slide2 -->
<section id="slide2">
  <div class="inner">
    <div class="block">
      <h1> Design Gráfico</h1>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <div></div>
    </div>
</section>
<!--slide4 -->
<section id="slide3">
  <div class="inner">
    <div class="block">
      <h1> Loja Virtual</h1>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <div></div>
    </div>
</section>
<section id="slide4">
  <div class="inner">
    <div class="block">
      <h1> Criação de Sites </h1>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <div></div>
    </div>
</section>

  • Perfect !! thanks a lot, thank you very much.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.