CODEWITHSUNDEEP
htmlcss
randomcoder66785
randomcoder66785

Reputation: 68

How do i make my background-image in css show?

So I am trying to make my background image show as in the photo below:expected result

But yet,it does not show up like intended when i try to make it work:reality result

Here's my CSS code:

.child2 img{
  background-image: url('/assets/images/imageborder.png');
  background-repeat:no-repeat;
  background-position: center;
  background-size:cover;
  background-size:400px 30px;
}

HTML part:

  <div class="Parents">
    <div class="child1">
      <h4>Infrastructure</h4>
      <p>We innovate & supply effective planting system. Provide consultation, design, build & transfer of a
        non-toxic farm.</p>
    </div>
    <div class="child2">
      <img src="assets/images/infrastructure.png">
    </div>
  </div>

I dont understand,I made everything perfect and yet the background doesn't show up somehow..... Can anyone help me to solve this?

Upvotes: 1

Views: 418

Answers (2)

Zbigniew
Zbigniew

Reputation: 36

background-image: in CSS is applying image to any <div> or <span> tag and more. You don't need to use <img> tag. You need to add background image to parent DOM element which contain content you want to display in front.

<div class="parents">
    <div class="child1">
      <h4>Infrastructure</h4>
      <p>We innovate & supply effective planting system. Provide consultation, design, build & transfer of a
        non-toxic farm.</p>
    </div>
</div>

CSS

.parents{
  background-image: url('/assets/images/imageborder.png');
  background-repeat:no-repeat;
  background-position: center;
  background-size:cover;
  background-size:400px 30px;
}

Keep in mind that background-image above will be fixed to the position of parents DOM element.

If you want to make a fixed background-image to whole page you need to do this like that:

<body>
<div class="Parents">
    <div class="child1">
      <h4>Infrastructure</h4>
      <p>We innovate & supply effective planting system. Provide consultation, design, build & transfer of a
        non-toxic farm.</p>
    </div>
</div>
<div class="background-image"></div>
</body>

CSS

.background-image {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('assets/icons/google.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Upvotes: 2

Arsya Adi Setiawan
Arsya Adi Setiawan

Reputation: 455

I will try to help,if you want to make a background image, then you have to put the style in the wrapper of the sentence,I've tried it and it works

.Parents{
  background-image: url('/assets/images/imageborder.png');
  background-repeat:no-repeat;
  background-position: center;
  background-size:cover;
  background-size:400px 30px
}
  <div class="Parents"> 
        <div class="child1">
         <h4>Infrastructure</h4>
         <p>We innovate & supply effective planting system. Provide consultation,               design, build & transfer of HAVVA non-toxic farm.</p>
     </div> 
    <!-- <div class="child2"> 
        <img src="assets/images/infrastructure.png">
     </div>  -->
</div>

enter image description here

Upvotes: 0

Related Questions