before css div background image not be cover in background means background image broken the div and go to another div. Please help me to fix this.
Please Check this codepen link:-
https://codepen.io/anon/pen/wyyJKB
This is my code
.learn-more {
background: #063047;
padding-bottom: 2em;
}
.learn-more:before {
content: "";
background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-
taking-nature-online-definition-high-background.jpg);
display: block;
width: 100%;
height: 100%;
padding-bottom: inherit;
position: absolute;
opacity: 0.15;
left: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
<style>
/* css */
</style>
<div class="section learn-more">
<div class="inner">
<h2 class="" style="color:#fff;">I help you for this</h2>
<p class="" style="color:#fff;">Do you want call</p>
<p>
<a href="#">
<span class="" style="color:#fff;">CLICK HERE</span>
</a>
</p>
</div>
</div>
You can try this code.
HTML:
<div class="section learn-more">
<div class="inner">
<h2 class="" style="color:#fff;">I help you for this</h2>
<p class="" style="color:#fff;">Do you want call</p>
<p>
<a href="#">
<span class="" style="color:#fff;">CLICK HERE</span>
</a>
</p>
</div>
</div>
CSS:
.learn-more {
background: #063047;
padding-bottom: 2em;
position: relative;
}
.learn-more:before {
content: "";
background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-taking-nature-online-definition-high-background.jpg);
display: inline-block;
width: 100%;
height: 100%;
padding-bottom: inherit;
position: absolute;
opacity: 0.15;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.inner h2{
margin: 0;
}
.learn-more {
background: #063047;
padding-bottom: 2em;
position:relative;
}
If you positioning any div or element to Absolute. Make sure the parent element should be positon:relative;
Use position: inherit; instead of position: absolute; in class .learn-more::before
.learn-more::before {
content: "";
background-image: url(https://wallpapers.walldevil.com/wallpapers/a78/preview/breath-taking-nature-online-definition-high-background.jpg);
display: block;
width: 100%;
height: 100%;
padding-bottom: inherit;
position: inherit;
opacity: 0.15;
left: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
Related
I want to fix this page (http://l2topserver.com/l2topserver) just to have a right banner link. I made this code
but when the screen's resolution the page is broken in the right side. What settings can I use that the page won't break?
First snippet
.header11 a {
display: block;
background-image: url("http://www.l2topserver.com/test/1.jpg");
padding-left: 395px;
padding-top: 1000px;
width: 100px;
left: 5px;
top: 10px;
position: fixed;
}
<div class="header11">
<div align="left">
<a href="https://www.google.com" target="_blank">
</a>
</div>
</div>
Second snippet
.header111 a {
display: block;
background-image: url("http://www.l2topserver.com/test/2.jpg");
padding-left:395px;
padding-top:1000px;
width:100px;
left: 1410px; top: 10px;
position: fixed;
overflow: auto;
}
<div class="header111">
<div align="right">
<a href="https://www.google.com" target="_blank">
</a>
</div>
</div>
You can use right: 0; in the second image.
.header11 a {
display: block;
background-image: url("http://www.l2topserver.com/test/1.jpg");
padding-left:395px;
padding-top:1000px;
width:5%;
left: 5px; top: 10px;
position: fixed;
}
.header111 a {
display: block;
background-image: url("http://www.l2topserver.com/test/2.jpg");
padding-left:395px;
padding-top:1000px;
width:5%;
right: 0;
top: 10px;
position: fixed;
overflow: auto;
}
I tried to show text over image but it doesn't work for me
this is my code
.banner{
background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(img/aboutus/s4.jpg);
background-size: cover;
background-attachment: scroll;
background-repeat: no-repeat;
height: 80vh;
position: relative;
}
.img{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.info h5{
position: absolute;
z-index: 15;
top: 0;
left: 50%;
}
<section class="banner" >
<div class="container">
<div class="info">
<h5>about us </h5>
</div>
</div>
<img class="img" src="img/aboutus/home_overlay.png">
</section>
Result is displayed without text
how to solve this issue and sorry for bad English.
Here is a very simple solution with minimal formatting, so it is easier to edit.
.background {
background: url(https://media.giphy.com/media/xTiTnxpQ3ghPiB2Hp6/giphy.gif) repeat;
border: 2px solid black;
height: 175px;
}
.info {
padding-left: 20px;
font-family: Arial;
font-size: 20px;
color: white;
}
<div class="background">
<p class="info">About Us</p>
</div>
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>
I am trying to place an image inside of a div. My problem is it is not fitting the image into the div, the image is in the div, it is just not fit to the div. It shows like a portion of the image because the image is bigger than the div. Can anyone help me get it to fit the whole image in the div without it being dis-proportional? I have the following:
Markup
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url(Images/my_image.jpg);">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
</div>
</div>
CSS
/* Overlay text */
.module {
/*background-color: #abc;*/
background-attachment: fixed;
/*width: 400px;*/
height: 300px;
position: relative;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
Image
I know this is already answered, but you may prefer this solution better:
Demo
It allows scaling the image but without stretching it, as that is usually undesired.
If the image gets too big, you can always add a max-width to prevent that if you want.
HTML
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url('http://i.stack.imgur.com/NuEZ2.jpg');">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
<img src="http://i.stack.imgur.com/NuEZ2.jpg" style="visibility:hidden; width:100%; display:inherit"/>
</div>
</div>
CSS
/* Overlay text */
.module {
background-size:cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: inherit;
background-position: bottom;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-size: cover;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
padding: 10px 10px;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
padding: 10px 10px;
color: white;
position: relative;
z-index: 1;
}
You need to remove background-attachment: fixed and implement background-size as follows. Here's the demo.
.module{
background-size: 100% 100%;
/* other css */
}
you have another class called newClass that you haven't supplied mark-up for _
i'm just wondering if it has relevant parameters that might affect the outcome of .module class?
Try
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url(Images/my_image.jpg);background-size:cover;">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
</div>
</div>
You should set background-size to cover ie...
.img-responsive{
background-size: cover
}
It looks like you're using a background image here. Try setting background-size to "contain" or "cover" on your module class. Be aware that background size is not supported in older versions of Internet Explorer.
my question is simple.
I have this page: http://vacanor.com/tests/lared
There is that image in the middle of the first section that floats on the screen. I want to stick that image in the first section preservating its position whenever I change the screen size. I've tryed everything but I can't.
Here is a video about what is bothering me: https://www.youtube.com/watch?v=U37_1cY8nAs
My html(including second section):
<div class="container-a">
<!--<div class="col-lg-12">-->
<div class="img-cover">
<center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
</center>
</div>
</div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
<!-- <div class="col-lg-12">-->
<div class="ani">
<div class="intro">
<h1 class="animated fadeInDown animated-d-1 cd-headline slide">
Bienvenido a La Red
<small>
<span class="text-primary cd-words-wrapper" style="width: 207px;">
<b class="is-hidden">Construir </b>
<b class="is-hidden">Jugar</b>
<b class="is-hidden">Sobrevivir</b>
<b class="is-visible">Divertir-se </b>
</span>
<span>nunca será lo mismo.</span>
</small>
</h1>
</div>
</div>
</div>
And my css:
.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}
I did not really understand your question, so here are 3 fixes to how I understood it.
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}
The above code should make your image not get out of the div when resizing the screen, and below is an example of how to resize the image accordingly;
.img-cover-i {
position: relative;
height:calc(100% - 50px)
}
Also, if you want your Logo to follow the screen but not be visible outside the container a, use this code:
.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
Also, if using this code, remove the that wraps the img in the html part.
I hope this helped.