I have a very large wallpaper (1920x1080 - Full HD) on my site, and I want it to center to the middle of the screen, instead of the left side, if the browser window is smaller than the image.
My current markup looks like this:
<div id="wallpaper">
<img />
</div>
And the styles are:
div#wallpaper
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
div#wallpaper img
{
display: block;
margin: 0px auto;
}
I'm using an img tag, because I load it async through jquery, and I'm using position absolute on the parent div to ensure it stays out of the page flow. Finally my content is positioned on top of it with z-index higher than 1.
The problem with the above is, when you browser is only 1024x768 you'll just see the left side of the image - I want it to be the middle portion.
Meaning it should crop from both left and right sides, when the wallpaper is larger than the browser window.
Hope all this made sense, otherwise please ask :-)
I'm not sure what you want to do is possible, the way you're doing it.
What I would do is set the image to be the background-image of the wallpaper div, and then set the background position to center the image.
eg.
<div id="wallpaper" style="background-image: foo.jpg"></div>
and in CSS...
div#wallpaper
{
background-position: top 50%;
}
Related
I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
Moving from backend to the frontend, I was given a design and don’t know the best way to handle how to implement it. It’s gonna be about 6 or some images or layered. All Images are 1920px wide * X px high.
I did a little fiddle so you can see what I’m working with. A few images are in there too. https://www.bootply.com/EEjlR9IaFN#
So the problem is setting the width and height of the image/div causes it to extend outside of the bootstrap container and it’s not responsive. So that’s where I’m stuck, I can’t think of a way to make these images fit inside of this container and be responsive. I was gonna just use the img tag but would rather do it via css if I can
You can do a little trick that I learned to do the same thing, and it's putting an image behind for the responsive and the background for the front.
HTML:
<div class="element">
<div class="background-image"></div>
<img src="http://via.placeholder.com/1920x1080" class="image-responsive" alt="">
</div>
CSS:
.element{
position: relative;
display: inline-block;
}
.background-image{
background-image: url('http://sharksharkshark.net/snow.png');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.image-responsive{
max-width: 100%;
}
NOTE: You can play and change the size of the back image for the responsive. In this way the div will not be empty but it will be responsive.
Example:
https://jsfiddle.net/grg9rc7z/1/
Started playing around with SVG and am having trouble getting it to position the way i want to. What I want to achieve is for my SVG to come in front and locked to the bottom of the border-div and be centered on the page as well as resize when the window is resized (responsive). So far I've played with the viewbox and height/width properties of the SVG to get the responsive behavior but I can't figure out to not have the SVG slip under the rest of my page(see picture to have a better idea of what's hapenning). I tried to play with the z-index and position:absolute but to no avail. Here's what I have so far for my code: (I use the bootstrap framework with SASS)
HTML
<section>
a first section
</section>
<section class="parallax1">
<div class="container-fluid">
<div class="row">
<div style="height:500px;">
<div class="col-sm-12 border-div">
<div class="col-sm-12">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-test" viewBox="0 0 500 375">my SVG</svg>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
Another section
</section>
CSS
.border-div{
height:100px;
background-color: $orange-background;
}
.svg-test{
left: 50vw;
width: 100%;
height: 600px;
}
.parallax1{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../images/bkgnd.jpg");
}
What i get right now is something like this:current result
And what I am looking for is this:desired result
Preliminary remarks
A few remarks about your problem, which may also explain why you haven't received any answers in such a long time:
Your problem is about the positioning of an SVG image in an HTML document. Playing around with ViewBox won't solve your problem, as this merely dictates what the SVG image should show, and not how the SVG image should be positioned within a parent document, in this case a HTML document. In fact, you could replace the SVG image with a DIV countainer and nothing would change about the solution.
It isn't really clear what you want:
Does come in front and locked to the bottom imply that you want the SVG image to appear when the user scrolls, or with some animation? Or does it mean you want the SVG to be placed there statically, independent of any event?
Does centered on the page mean horizontally only? If you meant also vertically, I don't understand how it should be in relation to the height requirements of the DIVs, or the requiement that it should lock to the bottom of the border-div.
And does resize when the window is resized only mean change its width or also its height? Because you've defined the height as 600px, which clearly won't respond to any resizing of the window.
slip under the rest of my page - I thought the SVG should be on top of everything else?
It's not clear whether the first and the last sections should have a stable width, or be responsive. And how they should relate to the 500px. A bit of CSS for them would be good.
So the 100px of border-div should be part of the 500px? In the "screenshots" it doesn't seem like it, but the code you posted suggests so.
Also, there are some inconsistencies in your formulation of the problem:
The width of the SVG is defined as 100%, but your pictures show that it's clearly not 100%. After all, if it were 100%, you wouldn't have to worry about centering it, either.
The height of the SVG is defined as 600px. If that was the case, it would be taller than the parent DIV, which is only 500px. The pictures show something different.
Last but not least, left: 50vh will make your SVG start at the horizontal center of the page, and not center it. If you want to center it, it should be (100% - width)/2 and not 100%/2.
Possible solution
In any case, here's the HTML code and the accompanying CSS styles to get what I (possibly incorrectly) interpret you are asking for:
<section id="first">
A first section
</section>
<section id="height-500">
<div id="border-div">
<div id="relative">
<div id="bottom">
<svg>
</svg>
</div>
</div>
</div>
</section>
<section id="another">
Another section
</section>
And here the CSS:
#first,
#another {
background: #808000;
height: 150px;
width: 100%;
height: 150px;
}
#height-500 {
background: green;
height: 500px;
position: relative;
}
#border-div {
background: #008080;
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
}
#relative {
position: relative;
width: 100%;
height: 100%;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
svg {
display: block;
background: #f00;
width: 20vw;
height: 20vw;
margin: auto;
}
Explanation of key points
Setting the position: relative of #height-500 allows you to position #border-div at its bottom. This trick will be used again for #relative and #bottom to place the SVG at the bottom of #border-div (setting width and height to 100% allows the dimensions of #relative to be identical to #border-div).
Setting the width and height of the SVG to 20vw indicate that we want the SVG to be a square, each side being 20% of the viewport width. If you change the width of your browser, the SVG will resize too.
margin: auto are used to place block elements in the horizontal center. Note that we need to turn the SVG into a block element for this to work, by setting display: block. (Note that margin: auto doesn't work for really old browsers, but there are workarounds with some additional DIVs.)
If you want the height of the SVG remain the same, you may want to play around with the preserveAspectRatio attribute to indicate you you want to deal with the changing aspect ratio.
Note that the viewport width vw also includes the scrollbar and isn't supported by some older browsers. However, there are other methods of keeping the aspect ratio, in case that's a requirement for you.
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
Scrolled all the way to the left:
Scrolled all the way to the right:
It seems that the ribbon is placed on the top-right side of the initial window, and stays static.
What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (not the browser view), and only be seen if I scroll to where its position is.
You can do a little trick and put your image into a div which has minimal-width.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body> section.
position:relative makes that all children of that elements that have position:absolute are positioned absolute according to that div, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
Two alternatives
Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
<img style="position: fixed; top: 0; right: 0; border: 0;"
Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
If you dont want to see the image when scrolling left then use a explicit width for this container I am talking about
Here is a JSFiddle example.
I used a squared div instead of an image. CSS code as follows:
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed; though this breaks the second part.
How about always sticking to the right top of the website using a relative float: Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
You should use float:right, adjusting margin if you need, e.g.: margin-right: 5px. Cheers :)
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
If so, here is a plausible solution:
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
DEMO FIDDLE
DEMO FULLSCREEN
You can also use a container div with min-width, your choice.
Change position: absolute; to position: fixed.
As side note, put the style on the a instead of the image and add some z-index to make sure it stays on top of everything else:
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div