I'm trying to make two separate "layers" of background by putting the contents of my webpage inside a div. The layer of background I put for the div is clipped before it reaches the edge of the screen, but the one set as a regular body background image isn't. I can't find anything in my HTML or CSS that would affect the margin of the div. Setting min-height & min-width of body to 100% creates overflow.
HTML:
<div id="bg">
(content)
</div>
CSS:
#bg{
background-image: url('bg1.png');
background-size: 100% auto;
margin: 0px 0px
}
body{
background-color: #0000FF;
background-image: url('bg2.png');
background-repeat: repeat;
background-size: 100% auto;
color: white;
}
Edit: I fixed it by setting the margin and pading of the body to 0px. I'm making the background like this so I can animate them separately.
A few considerations:
How tall is the div?: By default, a div is only high as its content height. That is, for instance, a div with 5 lines text in it is only 5 lines tall. If the background image is taller than the div height, it'll also be clipped at that height.
Suggestion: Perhaps give the div a particular height or/and try background-size
Is the div only for background layering?: In other words, can the background-image be moved to the body itself, so the the background attributes are controlled in the same element?
Suggestion: Perhaps use multiple background-images as illustrated in MDN doc
Related
When I place a background image in my div to create a background for it a scrollbar horizontally for the whole webpage. I think it is because my background-size: cover; made the background image grow to its original size but I want the image to scale down exactly to fit all devices.
Codepen: https://codepen.io/Javscript/pen/WNXmRMp?editors=1100
The scrollbar has nothing to do with the background image, not even with the element which has the background image. (Btw., a background image can never affect box sizing.)
The .main-con element has a width of 100% and a margin of 160px. The 100% does not refer to the remaining space; it refers to the width of the parent element, in this case the body.
So the .main-con element is as big as the body/screen, but has a 160px distance from the left side, resulting in it overflowing 160px on the right side.
One way to counteract this without completly reimplementing your website would be to set the width of the .main-con element to calc(100% - 160px).
Try to use this property:
background-size: contain;
background-repeat: no-repeat;;
The difference between the values cover and contain is that:
1- cover: makes the background covers the whole div
2- size: makes the background fits inside the div
You gave your background Image a size of 100%. But you have allso ur Sidebar. So the Image itself cant take all 100% of the screen. Try using
calc(100% - 160px)
for the with of the .main-con
I'm trying to fill a whole div with an image, regardless of the size of the image, but for some reason the image is only as big as it's default size. It does not automatically stretch to fit the size of the div. I tried setting the width and height of the image to 100%, thinking that it'll fit the div that way, but the image still stayed in its default size. Is there a way to automatically stretch an image to fill a div, without testing and changing each image by hand?
<style>
div {
border: 1px solid red;
width: 1000px;
height: 1000px;
background-image: url("side.jpg");
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
<div> </div>
From your question, it is unclear whether you are trying to use a background image or an img element to fill the div.
If you want to fill the div using an img element, the code you've posted will already do that for you. You just need to place an img element within the div, such as:
<div><img src="http://placehold.it/250x250" /></div>
If you want to stretch the image to fill the div using it as a background image, you simply need to add the value cover to the background-size property:
background-size:cover;
JSFiddle for img element
JSFiddle for background image
The <img> tag is an html element that has nothing to do with the background image of that <div>.
As APAD1 correctly points out, the proper way to force a background image to fill an html element is to use background-size.
background-size: contain fills the element until the background image touches the first edge of its container (maintaining the aspect ratio).
background-size: cover fills the element entirely while maintaining the aspect ratio of the image.
background-size: 100% 100% fills the element entirely so that the background image touches the edge of the element on all sides (thus potentially distorting the image).
I have a div with a background image:
<div id="myDiv">
...
</div>
#myDiv {
background-image: url(...);
width: 70%;
max-width: 200px;
}
Now, I want my background image to be resized to fit the div. To do this, a added background-size: 100%. This solves the problem regarding width, but the height only accomodates the content of the, and since the content of this div is smaller, the image is cropped in the bottom. What should I set for the height attribute so that it follows the resizing of the width?
If I understand well, you want the background to be streched and fit exactely to the div. In that case, try to set both values of the background-size property in this way:
background-size: 100% 100%;
I have a wrapper div that contains arbitrary content (I don't know its length). How can I put a background image that stretches its whole length since background-images doesn't stretch?
I've tried with a div containing a img tag. The div has a lover z-index that the rest of the content and has position: absolute. The problem is that the image is longer that the content and so it just makes it longer (the wrapper has overflow: auto).
<div id="wrapper">
<div id="image-wrapper" style="position: absolute"><img src="bg.jpg"></div>
[.. OTHER CONTENT ..]
</div>
If I set the div and the image's width and height to 100%, it takes the window's height, not the wrapper's.
Any help?
background-size is available since CSS3:
#image {
background-image: url("bg.png");
background-size: auto;
}
auto is the default value and does not stretch the image.
You can set the width and height manually:
#image {
background-size: 100% 100%;
}
or
#image {
background-size: 500px 300px;
}
The alternative: background-size: contain and background-size: cover.
contain stretches the image so that the image is as big as possible but completely visible within the element, whereas cover stretches the image to 100% width, regardless if the image is cropped at the top and/or the bottom.
But the different browsers are not completely consistent when rendering backgrounds with these keywords.
If you are willing to use JavaScript, check out Supersized. It seems to work well for this particular case.
you might also try html5 method on image.
#image-wrapper img {max-width: 100%}
Add position: relative to the styles for #wrapper.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
div {position: relative;}
#wrapper {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% auto;
}
<body>
<div id="wrapper">
</div>
I am trying alternate ways to present the background image of ocean.png in different elements. Right now I am putting into a div and it isn't showing. Earlier, I put into the body which shows and the image able to stretch fullsize when first stretched horizontally and then vertically on the browser but when I stretch vertically first then background image in body is not stretching full screen, white space on top and bottom.
I am experimenting on a div now but it didn't show up at all.
You have to set the width for the wrapper. width:100% and height:100%
Need to set the width and height of the wrapper div, also if the image is not in the same directory as the CSS the reference is wrong. if you have images in a /images directory you should call them as url(/images/myimage.png)
Set the width and height of the wrapper as others have said and join those css styles in one declaration and you can get rid of all other styles once you set the dimensions of the container.
background: url(ocean.png) center no-repeat