I have the following code:
.container {
width: 1rem;
height: 2rem;
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border: 1px solid black;
}
<div class="container"></div>
I expect the background image of the div to be stretched to the full width and height of said div.
Firefox behaves as expected:
But Chrome appears to have a bug that makes it interpret background-size differently:
You can see the live result in this fiddle
Re-creating the background image would not be a solution, as the div in question is of variable height.
Is there a work-around for this Chrome bug?
Maybe someone will find this post and not find the right answer.
I found out that in my case, i had to add an attribute to my svg File:
<svg preserveAspectRatio="none" ...
Well, maybe not the best solution, but at least it works fine for me in Chrome.
But you have to set the height (transform-scale) of the inner div with JQuery, according to your browser on load. Not really nice, but it works.
Also watch out for the -webkit-background-size.
As you can see, a lot of problems.
HTML:
<div class="container"><div id="picture"></div></div>
CSS:
.container{
width:1rem;
height:2rem;
border:1px solid black;
}
#picture {
width: 100%;
height: 100%;
background-image:
url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
-webkit-background-size: 100%;
-webkit-transform: scale(1,2);
}
http://jsfiddle.net/y0j5tejw/3/
Try this css for your code, it will definitely resolve your query.
.container{
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border:1px solid black;
float: left;
background-repeat: no-repeat;
width: 5%;
height: 30px;
}
Related
EDIT: Sorry, I realise it wasn't so clear, I'll try to clarify.
What I searching for is something that helps me to "zoom"/"scale" my background-image within the div when adjusting the height (not the width) of the browser window. (See attached image)
So far I've only managed to get the image to crop but still being centered using the code below.
Anyone have a solution for this?
Image of what I'm trying to achieve:
http://imgur.com/a/zJgF4
.wrap {
height: 50%
background-color: red;
overflow: hidden;
position: relative;
background-size: cover;
}
.image {
position: absolute;
left: 50%;
margin-left: -1020px;
background:url('https://placebear.com/2040/866') no-repeat;
width:2040px;
height:866px;
}
<div class="wrap">
<div class="image"></div>
</div>
I think this is what you are describing.
You can use background-size: cover; so that the image always fills the container.
https://developer.mozilla.org/en/docs/Web/CSS/background-size
This will at least scale the image to the correct proportions. Then you can scale the container how you want.
You can use vh units of measurement to control the height of the image container based on the height of the browser window.
https://snook.ca/archives/html_and_css/vm-vh-units
.wrap {
height: 70vh;
background-color: red;
overflow: hidden;
position: relative;
background: url('https://placebear.com/2040/866') no-repeat;
background-size: cover;
}
<div class="wrap">
</div>
:)
I have a responsive header.
Here's the code for the hero section:
.hero {
background: url(../../img/hero.jpg);
background-size: cover;
background-position: center center;
position: relative;
height: 100vh;
margin: 0;
#include breakpoint($x-large) {
padding-left: 5%;
padding-right: 5%;
}
It's all great and responsive; however, when I open the console on web or keyboard on android the vh doesn't change and the button and text elements stay shifted down.
I've tried adding padding and specific media queries and other solutions, but I cannot find a universal effective solution...
Why is this happening and how can I resolve this?
You need to attach .container-hero to the bottom of the .hero.
.container-hero {
position: absolute;
bottom: 5%;
}
You'll also need to fix your layout due to position: absolute;.
But you get the idea :)
<style>
div {
width: 100%;
height: 400px;
background-image: url('http://i.stack.imgur.com/gwAUR.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
I've been trying to figure this out for awhile now. Trying to use css to add a background image. I'm also using bootstrap. Here is my code
css:
.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100%;
width: 100%;
}
html:
<div class="container-fluid"></div>
Problem:
The image wont show up on my page.
It is because your div have nothing.
<div class="container-fluid">Something</div>
Either add something in div.
Or
Give fixed width and height. Or at least fixed height works.
.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100px;
width: 100px;
}
Add position:absolute; to the .container-fluid class..
Its simple as that..
Note:Adding something to the div makes the background to fit according to the content of the div.
try this one:
.container-fluid{
background-image: url('http://s13.postimg.org/51s3l0x3b/w3schools.png');
background-repeat: repeat-y;
height: 100%;
width: 100%;
}
DEMO HERE
.container-fluid{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
}
added position:absolute; to existing code
It appears your path to the your picture is wrong.
You dont need to set you path as C:....
just
background-image: url('just ../assets/img.piture.png or ./picture.png or picture.png');
Depending where your pictures is place in your project.
ex.
myproject/assets/images/picture.png.. etc.
the example below works.
.container-fluid{
background-image: url('http://www.fillmurray.com/100/100');
height: 100px;
width: 100px;
}
<div class="container-fluid"></div>
try to use in your style may help you
.container-fluid
{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
background-size:contain;
}
Rather was the wrong way Image. Please check again.
background-image: url('folder/picture.jpg');
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.