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
Related
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
I am attempting to create the effect of the first section in this site:
https://www.bandainamcoent.com/games/dragon-ball-fighterz#
The height of the div is changed on resizing the window so that the background image maintains its aspect ratio and the links positioned on the bottom of the div are still in view.
My current approach only adjusts the width of the background image on resizing. I have a set height on the div just so that the height doesn't collapse in on the content. However, I would like to make it so that the background image determines the height.
.landingPage {
position: relative; //<--This is only here for some absolutely positioned elements in the div
height: 950px;
width: 100%;
background-image: url(../assets/desktopLandingImage.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
It's impossible to have an element expand based on the size of its background image.
To resolve this, what I would recommend is to turn the background image into a child <img> element. On this <img> element, specify both the width and height that were previously on your container. Completely omit the height and width from the parent, and the parent will automatically expand to the size of the image.
This can be seen in the following:
.landingPage > img {
width: 100%;
height: 950px;
}
<div class="landingPage">
<img src="http://placehold.it/100">
</div>
Hope this helps!
I was searching for solution for hours but can't find it.
I have div with fixed height and 50% width. And I want to display a picture inside it with 100% width and default aspect ratio but vertically centered
Thanks ;)
<div class="wrap">
<img class="img">
</div>
Add overflow:hidden to your div and then adjust the margin of the image into the negative. How much depends on the div's fixed height and the image height.
EDIT
Consider using CSS and background images if you don't know the image heights. Instead of outputting an image tag, output an inline style on the div.
<div class="css-is-good" style="background-image: url(image.jpg);"></div>
CSS
div.css-is-good {
background-position: 50% 50%;
/* if you need to stretch it, use background-size: */
background-size: 100% auto;
}
Updated fiddle: http://jsfiddle.net/willthemoor/Cu3G5/
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/