I am adding a few images to a portfolio website but want to use background-image in oppose to the img property. The website is very responsive and uses percents for it's basic structure. I am using the background-img property and setting the width of the container to 100% of its parent. Adding a set height makes the image visible however adding height:100% or height:auto makes the image disappear, I'm sure this is probably a pretty simple piece of code to figure out but I can't seem to find a solution. Below is the code I am using to implement the image
.image-left {
float:left;
width:100%; height:100%;
background-image:url(/img/image.jpg);
background-position: center top;
background-size: 100% 100%;
}
And here is a http://jsfiddle.net/WD4HM/3/ to better explain my problem.
Any help would be appreciated, thanks guys.
height: 100% does not work unless the parent element has an explicit height. The reason the image is disappearing when you use this rule is because the element actually has no height.
However, you can use javascript to capture the window height, and then match the element you want to be 100% of the window height.
new answer:
#wrap {
width:50%;
margin:0 auto;
overflow:hidden;
background:blue;
}
.img-left {
float:left;
width:100%;
height: 100%;
background-image:url(tiger.jpg);
background-position: center top;
background-size: 100% 100%;
margin-bottom:45px;
}
Related
I've found a lot of answers to this question, but none (that I can find) apply to my particular situation.
I have an image in a div that I would like to scale with the width of the page. However, my image is much larger than what you actually see, as I'm using object-fit: cover and object-position to fit it to the container. I can't find a solution that keeps the image the same while scaling the container (and therefore image) down.
In other words, I would like the container and image to scale and have the image look the exactly the same. All the solutions I've found move the image around inside the container when the page width is changed.
Edit for clarity: Imagine there's a dot at the very center of the image, and normally that dot is in the very center of the container. In my case (because of object-position I think), the dot moves vertically when the width of the page is changed. I need some way to scale the container down to keep the dot in the same place.
Edit 2: Figured it out. Setting the height of the container via vw (viewport width) does exactly what I'm looking for. e.g. height: 10vw;
Here's the CSS I have at the moment:
.container {
height: 25%; /* This would need to be removed/changed I assume.*/
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 100% 80%;
}
My container is the full width of the page.
This seems so obvious to me, I think I didn't get your point.
Is this what you want ? This snippet shows that no matter the size of the picture, it will fit into the container.
EDIT Your issue is that your image isn't centered in your container. To do that, you have several options. Here is one using a relative position with a transform. You could also use flexboxes, which are, in my opinion, much better.
.container {
width: 500px;
border: 1px solid darkcyan;
height: 600px;
}
img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>
.image{
max-width: 100%;
}
<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />
To have your image fill the width of it's container, you need the max-width property:
.image {
max-width: 100%;
}
Well, after a bit more digging I found the answer to my question. The solution was to use vw (viewport width) to set the height of my container.
In my case, using height: 10vw; on the container does exactly what I'm looking for. The value of that can be adjusted of course depending on how much space you want the container/image to take up.
You can use max-width: 100%; in style of the img.
But another way is to use your image as a background of your div with the following style:
.container {
background-image: url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width:70%;
height:300px;
margin:0 auto;
}
<div class="container"><div>
Update:
You can run the following demo and change the size of it here
.container {
background-color: black;
width:70%;
margin:0 auto;
padding:20px;
position:relative;
}
img{
position:relative;
max-width:100%;
}
.dot{
background:yellow;
width:10px;
height:10px;
position:absolute;
left:50%;
top:50%;
transform: translate(-5px,-5px);
z-index:1;
border-radius:50%;
}
<div class="container">
<div class="dot"></div>
<img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>
You can see the yellow dot always (any page sizes) in the center of image and center of the container:
Small page size:
Large page size
I want to set the image as a background in a div so that the source can be changed for each device for its image resolution. the problem is I don't want to set the height of the div, but only it's width which is 100% so that it can be fit with the device window's width. Therefore, I want the height is automatically generated based on the width of the div.
I have set the height of auto, but the div is not appear unless I set the height with value.
#imagetree {
position:absolute;
z-index:12;
width:100%;
height:auto;
bottom:0;
overflow: hidden;
background: url(images/trees.png);
background-repeat: no-repeat;
}
if you knew in advance the ratio between width and height of your image you could cheat using a proportional padding-bottom
E.g If your image were 300x180 you may use this css
#imagetree {
position:absolute;
z-index:1;
bottom:0;
overflow: hidden;
background: url(http://dummyimage.com/300x180/000000/fff.jpg);
background-repeat: no-repeat;
width: 100%; /* use 100% of width */
padding-bottom: 60%; /* 180px is 60% of 300px */
background-size: cover; /* cover the div entirely with the background */
}
Example: http://codepen.io/anon/pen/ruBFt
When you give position: absolute, the height and width are not set initially. You need to manually set them using CSS. In your case, since you have put background as an image, being positioned absolutely, why do you wanna set it as background-image?
You can put the image in the <img /> tag itself and then render with normal widths and heights that are proportional to the image too! Change your code by adding an image inside the absolutely positioned container.
<div id="imagetree">
<img src="images/trees.png" />
</div>
And in the CSS, you may wanna give this:
#imagetree img {max-width: 100%;}
I'm trying to make the image have the same width as the browser screen. It needs to be responsive. I'm new at bootstrap 3 so any help is greatly appreciated.
Here is a code playground like for you to see exactly what I mean.
http://bootply.com/98241
You will see the jumbotron image is left aligned. I need it to stretch the full width of the page.
According to the Bootstrap documentation, to make .jumbotron full width, take it outside of any .container.
http://getbootstrap.com/components/#jumbotron
Make the img width 100%..
.widewrapper {
width:100%;
}
.widewrapper > img {
width:100%;
}
Bootply
I was having the same issue. I took mine outside of the container in html and used the following code in my CSS:
jumbotron {
position: relative;
background: url("img.url") no-repeat center center;
width:100%;
height: 100%;
background-size: 100% 100%;
}
.step-1-4 {
background:url('../images/gadget-4-sprite.png')
no-repeat; width:950px;
height:70px;
margin-left: 15px;
}
Above is the CSS for a div I have which holds a background-image. I have set the height and width of the div the same as the dimensions of the image. The problem i'm having is when the window is re-sized for example less than the width of the image, it gets cut off.
Is there a solution whereby I can style the CSS in such a way that the div re-sizes along with the image inside it. I have tried making the width of the div 100%, which re-sizes the div correctly, however the image still does not re-size. Maybe if this is not a good solution, then how can this be achieved using an <img> tag.
use background-size:cover; or background-size:100% 100%;
so your css will be ::
.step-1-4 {
background:url('../images/gadget-4-sprite.png') no-repeat;
background-size:100% 100%; /*..or cover ...*/
width:950px;
height:70px;
margin-left: 15px;
}
I have a main wrapper div with the following css attributes:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to make the whole div and it's brackground to be visible, even if the div itself is empty.
I dont want to use position:fixed or position:absolute if possible.
Unless you set a height in the parent container, the height of your #mainWrapper will compute to 0 and you won't see the background image or color.
Set the height to 100px to double check that your image is loading properly.
Make sure that your body and html tags have height of 100% if you want to use relative heights.
It may be that your HTML or body elements aren't big enough. height:100% will only fill the parent containers height so try adding this to your CSS:
html, body
{
height:100%;
}
http://jsfiddle.net/unt9M/ demonstrates this using a single coloured background. Remove the CSS that I've described above and you'll see that the div is only then single line because the body and HTML are not big enough.
add:
body,html{
height:100%;
}
See http://jsfiddle.net/derekstory/xU2g9/
Note that I added a background color to show the example.
Does you parent have any styles for width and height?
If the parent is body then try like this :
CSS
html,body{
width:100%;
height:100%;
}
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
background-size: cover;
}
JSFiddle
I simply added a float:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
float: left/right;
}