Image Disappears When Styling Class to Make a Round Image

Background Image in div disappear after wrapping an a tag around it

try it

<a href="images/myphoto.jpg">

  <div class="thumb" style="background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-size: contain; background-repeat: no-repeat;height:100%"></div>

</a>

css class makes html element disappear

The issue you have is that your ad blocker is is preventing the image from displaying.

The ad blocker is using the the ad_img class to find the element to block.

When I disable my blocker the image displays.

This also explains why it works on your phone, as your phone browser likely doesn't have an ad blocker.

Add an image inside a circle made with css

Use height and width 100% on the img and then use overflow: hidden; on .circle. If you have resolution issues that means the size of the circle is too large for the image to take up all available space. You should either get a larger image or set it as a background-image to .circle.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell:before {
  padding-bottom: 100%;
  display: block;
  content: '';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow: 0px 0px 15px 0px;
  overflow: hidden;
}

.circle img {
  width: 100%;
  position: relative;
  height: 100%;
}

h3 {
  text-align: center;
}

<div class="grid">
  <div class="cell">
    <div class="inner">
      <div class="circle"><img src="https://dummyimage.com/600x400/000/fff"></div>
      <div class="caption">
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>
    </div>
  </div>

Why does my Image disappear when navigation bar is resized

Here's the correct working answer - even if setting the width on the flex item solved a portion of the issue. I moved the nav { float: right } to the media query above 799px and then added some styles (z-index and position) for below to the nav element.

Updated fiddle: https://jsfiddle.net/wkqph6x4/24/

(function($) { // Begin jQuery

  $(function() { // DOM ready

    // If a link has a dropdown, add sub menu toggle.

    $('nav ul li a:not(:only-child)').click(function(e) {

      $(this).siblings('.nav-dropdown').toggle();

      // Close one dropdown when selecting another

      $('.nav-dropdown').not($(this).siblings()).hide();

      e.stopPropagation();

    });

    // Clicking away from dropdown will remove the dropdown class

    $('html').click(function() {

      $('.nav-dropdown').hide();

    });

    // Toggle open and close nav styles on click

    $('#nav-toggle').click(function() {

      $('nav ul').slideToggle();

    });

    // Hamburger to X toggle

    $('#nav-toggle').on('click', function() {

      this.classList.toggle('active');

    });

  }); // end DOM ready

})(jQuery); // end jQuery

@charset "UTF-8";

.navigation {

  height: 70px;

  background: #262626;

}

.brand {

  position: absolute;

  padding-left: 20px;

  float: left;

  line-height: 70px;

  text-transform: uppercase;

  font-size: 1.4em;

}

.brand a,

.brand a:visited {

  color: #ffffff;

  text-decoration: none;

}

.nav-container {

  max-width: 1000px;

  margin: 0 auto;

}

nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

nav ul li {

  float: left;

  position: relative;

}

nav ul li a,

nav ul li a:visited {

  display: block;

  padding: 0 20px;

  line-height: 70px;

  background: #262626;

  color: #ffffff;

  text-decoration: none;

}

nav ul li a:hover,

nav ul li a:visited:hover {

  color: grey;

}

nav ul li a:not(:only-child):after,

nav ul li a:visited:not(:only-child):after {

  padding-left: 4px;

  content: ' ▾';

}

nav ul li ul li {

  min-width: 190px;

}

nav ul li ul li a {

  padding: 15px;

  line-height: 20px;

}

.nav-dropdown {

  position: absolute;

  display: none;

  z-index: 1;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

}

/* Mobile navigation */

.nav-mobile {

  display: none;

  position: absolute;

  top: 0;

  right: 0;

  background: #262626;

  height: 70px;

  width: 70px;

}

@media only screen and (max-width: 798px) {

  .nav-mobile {

    display: block;

  }

  nav {

    width: 100%;

    padding: 70px 0 15px;

    z-index: 100;

    position: relative;

  }

  nav ul {

    display: none;

  }

  nav ul li {

    float: none;

  }

  nav ul li a {

    padding: 15px;

    line-height: 20px;

  }

  nav ul li ul li a {

    padding-left: 30px;

  }

  .nav-dropdown {

    position: static;

  }

}

@media screen and (min-width: 799px) {

  

  nav {

    float: right;

    

  }

  .nav-list {

    display: block !important;

  }

}

#nav-toggle {

  position: absolute;

  left: 18px;

  top: 22px;

  cursor: pointer;

  padding: 10px 35px 16px 0px;

}

#nav-toggle span,

#nav-toggle span:before,

#nav-toggle span:after {

  cursor: pointer;

  border-radius: 1px;

  height: 5px;

  width: 35px;

  background: #ffffff;

  position: absolute;

  display: block;

  content: '';

  transition: all 300ms ease-in-out;

}

#nav-toggle span:before {

  top: -10px;

}

#nav-toggle span:after {

  bottom: -10px;

}

#nav-toggle.active span {

  background-color: transparent;

}

#nav-toggle.active span:before, #nav-toggle.active span:after {

  top: 0;

}

#nav-toggle.active span:before {

  transform: rotate(45deg);

}

#nav-toggle.active span:after {

  transform: rotate(-45deg);

}

body, html {

  height: 100%;

  margin: 0;

  font-family: 'Montserrat', sans-serif;

}

body {

  height: 1000px;

}

.hero-image {

  background-image: url(https://stmed.net/sites/default/files/leaves-wallpapers-25246-1391025.jpg);

  height: 50%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

/*==========WELCOME-TEXT==========*/

.hero-text {

  text-align: center;

  color: white;

  font-family: 'Slabo 27px', serif;

  font-size: 26px;

}

.hero-text h2 {

  font-style: italic;

  font-size: 22px;

}

@media only screen and (max-width: 450px) {

  .hero-text h1 {

    font-size: 20px;

    font-family: 'Slabo 20px', serif;

  }

  .hero-text h2 {

    font-size: 18px;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="navigation">

  <div class="nav-container">

    <div class="brand">

      <a href="#!">image</a>

    </div>

    <nav>

      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>

      <ul class="nav-list">

        <li>

          <a href="#!">header 10</a>

        </li>

        <li>

          <a href="#!">header 9</a>

          <ul class="nav-dropdown">

            <li>

              <a href="#!">header 8</a>

            </li>

            <li>

              <a href="#!">header 7</a>

            </li>

            <li>

              <a href="#!">header 6</a>

            </li>

                        <li>

              <a href="#!">header 5</a>

            </li>

                        <li>

              <a href="#!">header 4</a>

            </li>

          </ul>

        </li>

        <li>

          <a href="#!">header3</a>

        </li>

        <li>

          <a href="#!">header 2</a>

        </li>

                <li>

          <a href="#!">Header 1</a>

        </li>

      </ul>

    </nav>

  </div>

</section>

<div class="hero-image">

  <div class="hero-text">

    <h1>Bring Your Garden And Driveway to life </h1>

    <h2>Scroll Down To Learn More</h2>

  </div>

</div>

---

Related Topics