I have a problem stretching a specific image to fit its parrent div.
On chrome/fire this works great.
On IE(I am using 11) this image does not stretch to its container.
I tried every example out there.
Please look at my code from plunker:
https://plnkr.co/edit/KHbgUXjDc349RpPgcWV9?p=preview
<div class="cls-1">
<div class="cls-2"></div>
<div class="lp__box-shadow icon-login_shadow"></div>
</div>
.icon-login_shadow {
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A0.2%3Bmix-blend-mode%3Ascreen%3Bfill%3Aurl%28%23linear-gradient%29%3B%7D%3C/style%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22251.59%22%20y1%3D%22193.59%22%20x2%3D%22251.59%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220.14%22%20stop-color%3D%22%232f343b%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%220.52%22%20stop-color%3D%22%23337082%22%20stop-opacity%3D%220.41%22/%3E%3Cstop%20offset%3D%220.85%22%20stop-color%3D%22%23369fb9%22%20stop-opacity%3D%220.73%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337b1cf%22%20stop-opacity%3D%220.85%22/%3E%3C/linearGradient%3E%3Csymbol%20id%3D%22login_box_mirror%22%20data-name%3D%22login%20box%20mirror%22%20viewBox%3D%220%200%20503.17%20193.59%22%3E%3Crect%20class%3D%22cls-1%22%20width%3D%22503.17%22%20height%3D%22193.59%22/%3E%3C/symbol%3E%3C/defs%3E%3Ctitle%3Elogin%20shadow%3C/title%3E%3Cg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%3E%3Cg%20id%3D%22login_2%22%20data-name%3D%22login%202%22%3E%3Cg%20id%3D%22Login_background_window_copy%22%20data-name%3D%22Login%20background%20window%20copy%22%3E%3Cuse%20width%3D%22503.17%22%20height%3D%22193.59%22%20xlink%3Ahref%3D%22%23login_box_mirror%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.lp__box-shadow {
margin-top: 0.5em;
height: 50px;
width:100%;
}
.cls-1{
width:50%;
}
.cls-2{
border: 1px solid red;
height:50px;
width:100%;
}
EDIT:
Who ever thinks its a duplicate, show it on the plunker, the "duplicate" not working in my case
use this:
background: url('url.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Related
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
Hello I've done this: http://inventors.000webhostapp.com
and the thing is I'd like to make each background image fit the entire screen.
For that matter I searched and found this:
html {
background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
that made 1 of the pictures fit all the screen but my problem comes when I want to add a second one.
What I did is create
.p1 {
background: url(1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.p2{
background: url(2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
</body>
</html>
That makes the background images just tiny (the height of hello)
Here comes the question:
Is there any way to make those 2 images fit all the screen one after the other?
So I would see all the first image when I open the WebPage and when I scroll all the way to the bottom I would see entirely the second image?
Obviously I plan to put more than 2 background images for my portfolio but this is a good way, I think, to start with!
You have to set the size for your container. You can set the viewport size for the container with 100vh (height) and 100vw (width). See the following example:
html, body {
padding:0;
margin:0;
}
.p1 p, .p2 p {
display:inline-block;
}
.p1 {
background: url(http://placehold.it/100x100) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
.p2{
background: url(http://placehold.it/101x101) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100vh;
width:100vw;
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
As noted by Axnyff in the comments background-size:cover only affects the way the background fills the containing element. In order to make these elements fill the screen you can use the vh viewport height unit.
body, p {
margin: 0;
}
.p1, .p2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.p1 {
background-image: url(http://lorempixel.com/400/200/nature/1/);
}
.p2{
background-image: url(http://lorempixel.com/400/200/nature/2/);
}
<div class="p1">
<p>hello</p>
</div>
<div class="p2">
<p>hello</p>
</div>
Edit:
One vh unit is equal to 1% of the viewport height hence the use of 100vh in my example to fill the viewport.
Hopefully this will be a quick question. I wanted to add an image to my landing page that scales to any screen. I found this code to be the suggested and most optimal method
html {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
However I am having problems implementing this. This code does what it is supposed to, however if I set it under html then this image takes place anywhere I call html in my site which I dont want. I want this to occur in one page of my site only. I tried creating my own custom html tag bodycover {} but that didn't work.
I am new to this and have not taken a step into custom html tags yet. I feel like there is an easy solution to this but I can't find it despite researching it thoroughly.
Thanks
EDIT: If there is a simply way to get this working without a custom element that would be even better. I simply don't know of one
Like #Paulie_D said, you don't need to apply this to the html tag; a standard div will work. Also, give the new element some dimension to width and height. Slightly cleaned up:
.bg {
width: 100%;
height: 100%;
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Make sure the parent element of .bg has a height and width of 100% as well.
Why not do like this, where you add an attribute or class to the body for the particular page.
This can be done either server side, using i.e. ASP or PHP, or client side, in the page load event.
Page to show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body class="big-bkg">
</body>
Page to not show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
</body>
I'd say: put all that stuff into body, not html
body {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can make it with a simple absolute div with width and height 100% just after the body tag and z-index lower than the main-container.
html,
body {
padding: 0;
margin: 0;
position: relative;
height: 100%
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg') no-repeat center center fixed;
background-size: cover;
}
.main-container {
position: relative;
width: 80%;
background-color: red;
height: 80%;
margin: auto;
z-index: 3;
}
<div class="bg"></div>
<div class="main-container"></div>
I'm having a small issue. I am making a site using many banners of same size on identical pages, each one representing a different industry. So its just a matter of replacing images and text.
My banner images are part of a "Banner CSS" class, but I don't know how to use different images without copying and pasting my "Banner CSS" class every time. I'd prefer to keep my CSS clean and use one class for all the banners. Every time I try and use HTML to import the photo it either doesn't appear, or doesn't function the way I'd like it to. (Responsive and Cropping at a min-height"
Here's the HTML
<div id=industries-strip>
<div class="resp-auto">
</div>
</div>
Here's the current CSS
#industries-strip {
position: relative;
overflow: hidden;
width:100%;
height:100%;
padding-bottom: 27%;
min-height: 250px;
z-index: 6;
.resp-auto {
display: inline;
background-image: url("../img/strip-industries-automotive.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
float:bottom;
position:absolute;
}
Currently my banner shrinks responsively, until a certain height, then begins to crop at the sides, and this is my goal. But I'd like to be able to do this on other pages and not make my CSS page a long mess.
Thanks
Why not create a banner class with all the common css in, and then have unique classes for the different pages that have the unique background-image property set.
E.g.
.banner {
display: inline;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
float:bottom;
position:absolute;
}
.automotive {
background-image: url("../img/strip-industries-automotive.jpg");
}
.automotive-2 {
background-image: url("../img/strip-industries-automotive-2.jpg");
}
make two css, first for resp-auto:
.resp-auto {
display: inline;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
float:bottom;
position:absolute;
}
and second for industries
.industrie1 {
background-image: url("../img/strip-industries-automotive.jpg");
}
and use a two classes
<div class="resp-auto industrie1">
</div>
When i choose a image to put as a background of my div i can't manage to make it look normal. The width and height of my header are made with em. Can someone explain me how i can get a image as a background at my header when the header is like: 120em width. 5em height. So i need to make a normal header background the size of my header.
.header{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url('images.jpg');
text-align: center;
width: 120em;
height:5em;
background-size:100%;
}
.left{
background-color:red;
float: left;
width: 20em;
height: 51em;
}
.middle{
background-color: green;
width:120em;
padding:0px;
margin:0px;
height:51em;
}
.footer{
height:4em;
width: 120em;
background-color: blue;
}
Check here, http://css-tricks.com/perfect-full-page-background-image/
DEMO http://jsfiddle.net/yeyene/PtEnY/3/
#yourHeader{
float:left;
width:120em;
height:5em;
background: url(images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-background {
background: url(image/bg.jpg) no-repeat center/cover;
}
I think I understand what you are try to achieve, the above is what I use, just drop it on the highest level div where you want the background image and it should stay relatively "in frame" as the page scales. You way want to add a bit to this for compatibility but the above is the general gist.