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>
Related
I'd like to put news titles on image background like this:
What I came up with, is this:
<div class="image-container">
<img src="/path/to/img" class="img-thumbnail">
<div class="text-block">
<div class="bottom-right">My News Title</div>
</div>
</div>
CSS:
.text-block {
position: absolute;
bottom: 0px;
right: 0px;
background-color: #fff;
opacity: .8;
color: black;
width: 100%;
}
.bottom-right {
color: black;
position: absolute;
bottom: 8px;
right: 16px;
background-color: #fff;
}
Which results in this:
My problem is how to modify my code so that the title appears on a semi-transparent background which covers 1/3 of the bottom of the block, like the coffee picture above?
You could clean up the markup a bit and use a simple container element with a title (e.g. a div and a heading).
As noted by #zero298 if the image doesn't convey any information it should be defined as a background of the container
Codepen demo
Markup
<div style="background-image: url(https://.../coffee-serum-300x240.jpg)">
<h2>
The title of this article
may span across several lines.
but it's always anchored on the bottom
</h2>
</div>
CSS
div {
width: 300px;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
div h2 {
background: rgba(255, 255, 255, .6);
margin: 0;
padding: 1em 1em 3em 1em;
}
Final result
Since the image is decorative, use background-image:
.card {
width: 100px;
height: 200px;
color: white;
background-color: blue;
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text{
background-color: rgba(1,1,1,0.5);
}
<div class="card">
<div class="text">
<h2>Hello World</h2>
<p>Foo bar</p>
</div>
</div>
You could do the following :
.bottom-right {
color: black;
position: absolute;
bottom: 50%;
right: 50%;
background-color: #fff; }
.image-container {
position: relative;
text-align: center;
color: white; }
.text-block {
position: absolute;
top: 95%;
left: 50%;
height: 40%;
transform: translate(-50%, -50%); }
Also, I think this is very helpful form w3schools.
https://www.w3schools.com/howto/howto_css_image_text.asp
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%;
}
I have a fixed header with a full screen background image under that my sections. what i am trying to do is if i have a alert it will echo above the whole page pushing down the header and hero. but it either wont show up or when i do get it to show it wont stay fixed and scrolls with the page.
.sitrep {
top 0;
height: 50px;
width: 100%;
position: fixed;
z-index: 10000;
}
.siteHeader {
min-height: 76px;
height: 76px;
overflow: visible;
background-color: #000;
color: #f4f4f4;
position: fixed;
top: 0;
z-index: 10000;
}
#hero {
height: 100vh;
}
.hero {
background: url(images/hero-bg.jpg) no-repeat top center;
background-color: #000;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#hero-content {
position: absolute;
width: 100%;
bottom: 0%;
}
#hero-content a {
background-color: #131313;
padding-top: 10px;
height: 40px;
display: block;
font-size: 12px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#hero-content img {
display: block;
margin-top: 2px;
max-height: 145px;
margin-right: auto;
margin-left: auto;
margin-bottom: 53px;
padding: 5px;
}
<div class="sitrep">
<div class="alert-status">
<div class="info">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Announcement!</strong> anouncment goes here.
</div>
</div>
</div>
<div id="siteHeader">my header</div>
<!-- Hero Unit -->
<div id="hero" class="hero">
<div id="hero-content">
<img src="content/images/logo-dt.png" class="img-responsive">
<a class="button" role="button" href="#base">Learn more</a>
</div>
</div>
You are mixing up classes and ID's.
In your HTML, you give the element the ID of sitrep, whereas you are giving the styles to the elements with the class of siterep.
Try either of the following options and you'll be set :
Changing the element attribute: <div id="sitrep"> to <div class="sitrep">
Changing the CSS to fit the proper elements: .sitrep { to #sitrep {
Happy coding !
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.
I'll try to explain this the best that I can. I'm working on a website right now and I want a background image of one of my divs to fall behind the footer.
I've got it working when the image has a height of 450px but when I try to change it to 350px there is white space between it and the footer. As if there is 100px of space between it and the bottom of the page now.
In Chrome it looks fine no matter the size, but all other browsers it creates white space.
Here is my current HTML and CSS for the footer div and the div that is not working properly.
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="/wp-content/themes/tct/inc/assets/footer.png" />
</footer>
.testimonials {
background-image: url('/wp-content/themes/tct/inc/assets/mug.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
And lastly, here are screenshot of how it's supposed to look (it looks fine in Chrome) and how it's not supposed to look (how it looks in all other browsers).
Correct:
Incorrect:
Hopefully I explained everything enough so you understand my problem. Let me know if I need to provide any additional information.
Links to the images that I am using:
Mug: http://i60.tinypic.com/f4g3t3.jpg
Footer: http://i59.tinypic.com/xfq6x5.png
Try to wrap all this into another container and set explicit height to it and position: relative
.wrapper {
height: 370px;
position: relative;
overflow: hidden;
}
.testimonials {
background-image: url('http://oi60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
<div class="wrapper">
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="http://oi59.tinypic.com/xfq6x5.jpg" />
</footer>
</div>
I managed to find a solution that works for me for now. I'm sure it's not the way to go but it did help.
I added a negative margin-bottom of 100px to my content wrapper and that seemed to do the trick. However, that then screws up Chrome and Safari because they were rendering it properly before. So I used a conditional comment to set the bottom-margin to 0 in Chrome and Safari.
Other answers are of course welcome though!
increase value of height
.testimonials {
background-image: url('http://i60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 560px; //in my case
margin-bottom: -300px;
font-size: 24px;
}
or try it
footer {
word-wrap: normal;
text-align: center;
position: absolute;
bottom: 110px;
width: 100%;
}