How would I make this image background come out for only half of the section?
Question
I'm working on a website and in a particular section, I want a blue background image to appear for half the section but no matter what I do in terms of CSS, absolutely nothing works.
I've made so many attempts that it's too many to list. What am I doing wrong and how can I fix it?
Here's my html code:
<div class="row secOne secT">
<div class="myImage col-md-6"></div>
</div>
Here's my css code:
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
3 answers
solution1
1 2019-02-07 22:33:07
I've tried creating a simple html file using your code and by applying
background-size: 50% 100%;
background-repeat: no-repeat;
on the item having the desired image background I got something that seems your desired result.
Full code sample
<html>
<head>
<style>
.col-md-6 { /* Added this definition in order to get a visible div */
width: 800px;
height: 100px;
border: 1px solid black;
}
.row.secOne.secT {
padding-top: 20px;
}
.myImage {
background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;;
background-size: 50% 100%; /* Force background size to only fill half the div */
background-repeat: no-repeat; /* Avoid background repetitions */
}
</style>
</head>
<body>
<div class="row secOne secT">
<div class="myImage col-md-6">
AAAAA
</div>
</div>
</body>
solution2
0 2019-02-08 03:18:37
I think you can try this : https://i.stack.imgur.com/fdk00.png Try this too - https://i.stack.imgur.com/meURR.png
I hope it helps you - sorry if it does not.
solution3
-1 2019-02-07 22:53:13
You can make appear the blue background of your URL, setting the height CSS property
.row.secOne.secT { padding-top: 20px; } .myImage { background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 22em; }
<div class="row secOne secT"> <div class="myImage col-md-6"></div> </div>
Hope it helps!
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.