How do i make my background-image in css show?
Question
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?
2 answers
solution1
1 ACCPTED 2022-08-24 02:44:23
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;
}
solution2
0 2022-08-24 01:36:52
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.