Background image is not showing in IE. Whereas its showing well in Chrome.
Here is the CSS:
.banner1 {
background-image: url(/assets/images/banner-1.jpg)!important;
height: 100%;
display: block;
}
.banner2 {
background-image: url(/assets/images/banner-2.jpg);
height: 100%;
display: block;
}
.banner3 {
background-image: url(/assets/images/banner-3.jpg)!important;
height: 100%;
display: block;
}
.banner4 {
background-image: url(/assets/images/banner-4.jpg)!important;
height: 100%;
display: block;
}
html:
<div class="right_bx">
<span class="banner1"></span>
</div>
<div class="right_bx">
<span class="banner2"> </span>
</div>
<div class="right_bx">
<span class="banner3"></span>
</div>
<div class="right_bx">
<span class="banner4"></span>
</div>
When I refresh the page I see banner 1 image appearing. The image in fisrt div is apperaing in IE..For example if I give banner 2 in first div I am able to see banner 2 image. But subsequent div images are not showing up in IE
Not sure this will work but try this
.banner1 {
background-image: "assets/images/banner-1.jpg"!important;
height: 100%;
display: block;
}
.banner2 {
background-image: "assets/images/banner-2.jpg";
height: 100%;
display: block;
}
.banner3 {
background-image: "assets/images/banner-3.jpg"!important;
height: 100%;
display: block;
}
.banner4 {
background-image: "assets/images/banner-4.jpg"!important;
height: 100%;
display: block;
}
use background: url("..."); or
background-image: url("..."); also don't use / at the beginning of the file path.
Change /assets/images/banner-1.jpg to this: assets/images/banner-1.jpg etc.
.banner1 {
background: url("assets/images/banner-1.jpg");
height: 100%;
display: block;
}
.banner2 {
background: url("assets/images/banner-2.jpg");
height: 100%;
display: block;
}
.banner3 {
background: url("assets/images/banner-3.jpg");
height: 100%;
display: block;
}
.banner4 {
background: url("assets/images/banner-4.jpg");
height: 100%;
display: block;
}
Try to use F12 developer tools to check the related elements (whether the image load success or not, and the CSS style). I suppose perhaps the issue is related the div container is empty, so the image not display. you could try to fill content to the div, or refer to the following code to set the fix height property:
.right_bx{
height: 200px;
}
Related
So this is my code. I would like to display my image via data-bg on my div::after pseudoelement. I always get url, but I want display image.
body {
background: red;
width: 100vw;
height: 100vh;
}
div:before {
content: attr(data-bg);
display: block;
}
<div data-bg="https://via.placeholder.com/150"></div>
Code correction
There is a few errors in your code:
If you want to get the image at the requested url, you need to use url()
You are using content instead of background-image
Theoretically, your code should you like the following snippet with the corrections, don't forget to add a content and to size you pseudo-element.
body{
background: red;
width: 100vw;
height: 100vh;
}
div:after{
content: '';
background-image: url(attr(data-bg));
width: 150px;
height: 150px;
display: block;
}
<div data-bg='https://via.placeholder.com/150'></div>
Unfortunately, this won't work
The background-image property does not work well with url(attr()), so here is another snippet that does what you are trying to achieve. We're declaring a CSS variable for the element instead of using an HTML attribute. You may find more details in this related question
body{
background: red;
width: 100vw;
height: 100vh;
}
div:after{
content: '';
background-image: var(--bg-image);
width: 150px;
height: 150px;
display: block;
}
<div style="--bg-image: url('https://via.placeholder.com/150');"></div>
<html><head>
body{
background: red;
width: 100%;
height: 100%;
}
div:after{
content: '';
background-image: var(--bg-image);
width: 50%;
height: 50%;
display: block;
}
</head><body><div style="--bg-image: url('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80');"></div></body></html>`enter code here`
Trying to fix the lower section, span with anchor text. But its not helping out! It is require to use the background size:cover property! I've used in the header and it seems working but the same is not working with the lower section.
Here Goes the GitHub Repo
Here is old Apple.com Website from which clone is to be made
Here goes HTML:
<main>
<div class="lowerContainer">
<span class="lowerImage lowerImg1"></span>
<span class="lowerImage lowerImg2"></span>
<span class="lowerImage lowerImg3"></span>
<span class="lowerImage lowerImg4"></span>
</div>
</main>
Here goes the CSS:
span {
display: block;
}
.lowerContainer {
display: flex;
position: relative;
width: 100%;
max-width: 1445px;
border: #fff;
border-width: 10px;
background-size: cover;
}
.lowerImage {
margin-left: 1.5px;
padding: 5px;
width: 364px;
background-size: cover;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
.lowerImg1 {
background-image: url(../images/mobile-1.jpg);
}
.lowerImg2 {
background-image: url(../images/mobile-2.jpg);
}
.lowerImg3 {
background-image: url(../images/mobile-3.jpg);
}
.lowerImg4 {
background-image: url(../images/mobile-4.jpg);
}
Any Help will be greatly Appreciated!
Thanks!
you can try it this code to perfect view.
background-position: center;
this CSS to set the position of images to display.
.lowerImage {
margin-left: 1.5px;
padding: 5px;
width: 364px;
background-size: cover;
background-position: center;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
The width of each span is 364px so total width becomes 1456px which is more then the max-width of the .lowerContainer that is 1445px, so this can be the reason for left-right scroll.
Try to set the width for .lowerImage less, so that the combined width of all the <span> tags doesn't increases more than .lowerContainer max-width.
.lowerImage {
padding: 5px;
width: 360px;
background-size: cover;
height: 190px;
display: block;
cursor: pointer;
z-index: 1;
}
Hope it works.
I did do many searched for this but anything I try is not working. I need the image to fill the height of the div, the extra image can get off to the right. But anything I try is not working... What am I missing? I don't want to see any red in this box but yet keep the proportions of the image. Thank You!
https://jsfiddle.net/rhwx23o4/6/
<figure id="main-img"><img src="http://http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
width: 100%;
object-fit: contain;
}
You can use height: 100vh;
https://jsfiddle.net/rhwx23o4/65/
figure#main-img {
width:100%;
height: 100vh;
display: block;
background-color: red;
overflow: hidden;
}
figure#main-img img {
height: 100vh;
object-fit: contain;
}
Just a little bit of work around. On the breakpoint i.e here 840px I gave property display:none to your image and gave outer div background of same image.
NOTE: In media query I had to hard-code the max-width. It won't be same for all images.
figure#main-img {
width: 100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
width: 100%;
}
#media (max-width: 840px) {
div {
background: url('http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg');
height: 200px;
background-size: cover;
background-position: center center;
}
img {
display: none;
overflow: auto;
min-height: 200px;
max-height: 200px;
}
}
figure {
margin: 0px;
}
<figure id="main-img">
<div><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg" /></div>
</figure>
Try this CSS. Is this what you want? I gave the image a display property of block and changed the object-fit to cover instead of contain.
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
display: block;
min-height: 200px;
width: 100%;
object-fit: cover;
}
Check this https://jsfiddle.net/rhwx23o4/76/
Added height="100%" and width="100%" to the image tag
You can just use display: flex; in <figure> like this codepen:
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
display: flex;
}
Flex has magical powers to adjust content within it.
In case you do not want <figure> to take up whole screen width (which it would being a block element), you can change its display to display: inline-flex; and then add a certain width/max-width to it.
So this is one of the strangest IE bugs I have come across, and it's happening in IE11!
I have a simple element that looks as follows:
<div class="article">
<div class="wrapper">
<header><h1>Hello World</h1></header>
<div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'> </div>
</div>
</div>
with the following CSS:
*{margin:0;padding:0;}
.article {
height:200px;
background:aliceblue;
}
.wrapper {
height:100%;
display:table;
width:100%;
}
header, .image {
display:table-row;
width:100%;
}
header {
background:red;
height:10px;
}
.article:hover .image {
opacity:0.5;
}
For a JSFiddle click here (you might need to click Run to see the bug appear)
The issue is that when starting the page we do not see the background-image. When you hover over .article then the image suddenly appears! When hovering out the image remains (as expected).
It is as if the browser only repaints the background-image when the user hovers?
The image does not display on initial page load
The image displays on a mouse hover, the image will remain afterwards
How can we display the background-image by default?
Fiddle > http://jsfiddle.net/ykrbe4zy/
The key problem with image is that you're applying the display: table-row; for the image which seems not supported by IE properly.
Use display: inline-block; instead:
.image{
display: inline-block;
height: 100%;
}
here's the working demo
Change below code
from :
header, .image {
display: table-row;
width: 100%;
}
header {
background: red;
height: 10px;
}
TO
header, .image {
display: block;
width: 100%;
height: 100%;
}
header {
background: red;
height: 40px;
}
Updated Fiddle : http://jsfiddle.net/ts8ahznd/7/
Updated Code:
CSS
* {
margin: 0;
padding: 0;
}
.article {
height: 200px;
background: aliceblue;
}
.wrapper {
height: 100%;
display: table;
width: 100%;
}
header, .image {
display: block;
width: 100%;
height: 100%;
}
header {
background: red;
height: 40px;
}
.article:hover .image {
opacity: 0.5;
}
HTML
<div class="article">
<div class="wrapper">
<header>
<h1>Hello World</h1>
</header>
<div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'> </div>
</div>
</div>
Hope this will help!!!
I have a banner button, 600px width and 200px height. Half of that would be a plain background with text in the middle and the other half would be an image:
HTML:
<li class="banner">
<a>
<p>Lorem ipsum</p>
<div class="image"></div>
</a>
</li>
CSS:
li a {
display: block;
width: 600px;
}
li p {
background: #268388;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
}
li .image {
background: url(image.jpg) no-repeat;
background-size: cover;
width: 300px;
height: 200px;
}
The div inside anchor messes things up. Replacing the div with a span makes unwanted margins with other elements/spans that I also added.
What do I do? Any other alternative for that div (other than adding the image directly in the HTML)?
You can alternatively use a pseudo element like :after ... that doesn't add an unnecessary empty tag to the markup:
li a {
position: relative;
display: block;
width: 600px;
}
li p, li a:after {
width: 300px;
height: 200px;
}
li p {
float: left;
background: #268388;
margin: 0;
text-align: center;
line-height: 200px;
}
li a:after {
content:'';
position: absolute;
right: 0;
background: url(http://placehold.it/600x400) no-repeat;
background-size: cover;
}
I combined the overlapping rules, to make it a bit more dry.
DEMO
I wouldn't put a <div> inside of an <a>. For older browsers <a> elements should only have inline elements, a <div> is a block element. See Wrap link <a> around <div>
I would redo the HTML and pad the <a> to stretch out to cover the entire containing<div>. Float the new <div> and it's contained elements.
Something like:
HTML
<li class="banner">
<div id="newDiv">
<p>Lorem ipsum</p>
<div class="image"></div>
<a></a>
</div>
</li>
CSS
.newDiv a {display:block;width:x;height:x;padding:x;}
You need to float the <div> element as well:
a {
display: block;
width: 600px;
}
a > p {
float: left;
background: #268388;
width: 300px;
height: 200px;
margin: 0; /* new */
text-align: center;
line-height: 200px;
}
a > div {
float: right; /* new */
background: url(http://placehold.it/300x200) no-repeat;
background-size: cover;
width: 300px;
height: 200px;
}
Demo
Try before buy
Alternative
HTML
<a>
<p>Lorem ipsum</p>
</a>
CSS
a {
display: block;
width: 600px;
background: url(http://placehold.it/300x200) no-repeat 300px 0;
/* alternatively as suggested by Martin Turjak */
background: #268388 url(http://placehold.it/600x400) no-repeat top right;
background-size: auto 100%;
}
a > p {
background: #268388;
width: 300px;
height: 200px;
margin: 0;
text-align: center;
line-height: 200px;
}
Demo
Try before buy
Try with: <strong> or <em> tags.
There is very little difference between a span and a div, by default div is display: block and span is display: inline. I would try changing them to span and adding the following css
a span.image { display: inline-block; margin: 0px; padding: 0px; }
Add margin: 0; to your <p> element:
Running demo
Code
ul {
list-style-type : none;
}
li a {
display : inline-block;
width : 600px;
}
li p {
line-height : 200px;
background : #268388;
text-align : center;
height : 200px;
margin : 0px; /* This one */
float : left;
width : 300px;
}
li .image {
background : silver;
height : 200px;
float : left;
width : 300px;
}