Example to best describe question:
I have an image, lets call it background (blue in example). In this example the image is
2000px wide / 1000px high
has width: 100% set and will rescale with the browser window.
I also have another image, let's call it green. It's a square which is
200px x 200px (width is 10% of the size of the background).
What I want to achieve is that I want green to rescale and reposition accordingly and fully cover the pink target position of the background, regardless of current viewport width (in other words: it should be "responsive").
The rescaling part is easy, as it's just to set the width to 10%. The positioning is a harder nut to crack. The following code is as far as I get. As I'm using position: absolute I'm removing the element from it's natural flow and top: 40% will be 40% of 0 and the green square will stay at the top.
Same example code is available as a CodePen for easier editing: http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#
Is this simply not possible with pure CSS? If not, one possible workaround could be to use the image element of a svg.
.wrapper {
position: relative;
}
.bg {
position: absolute;
width: 100%;
}
.green {
position: absolute;
width: 10%;
left: 60%;
top: 40%; /* This isn't working */
}
<div class="wrapper">
<img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png">
<img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png">
</div>
(I had a hard time finding a suitable title for this question. Feel free to edit it)
Explanation: http://www.w3schools.com/css/css_positioning.asp
CSS:
.bg {
position: relative;
width: 100%;
}
Related
I wish to use a 197px X 196px spinner on top of a fullscreen background-image but with the code I am using, it takes the whole space (enormous!).
I just would like it to be at the center of the page with its "normal size", that is to say 197px X 196px
Here is a Demo: https://codepen.io/anon/pen/boqzNb
HTML
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center;background-size:cover;"></div>
CSS
#toto {
width: 100%;
height: 100%;
position: absolute;
}
I know the issue comes from the property 'cover' but in the project
I need the property background-size absolutely. On the 'click' event on a certain button, I inject via javascript into the URL a real image and I use background-property 'cover' so that it creates a fullscreen background image. Can I keep cover and 100% width & height for the final real image but restrict the size of the loader while it appears (loader disappears when the final image has fully loaded) ?
It should eb possible to have a 100% width and height background image and until it finishes to load a loading gif with a full REd color in the background and a loading gif on top of it but that this loading gif does not take the whole screen (quite ugly).
How can I manage this?
The width and height are percentages of the container of the element. If you specify width: 100%, you're asking for the element to take up 100% of the container, so yes, it's going to be the whole screen.
If you want the width to be 197 pixels, use width: 197px. The same goes for height.
Use next code:
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center center no-repeat;"></div>
it will centered you preloader and no repeat and there is no background-size property.
Since you know the width and height of the spinner, give it these settings to have it in original size and center inside its container (which in the codepen is the window):
#toto {
width: 196px;
height: 196px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
https://codepen.io/anon/pen/zEZeLj
The html
<div id="toto" class=""></div>
The css you need to set background style and keep div size is
#toto {
width: 100%;
height: 100%;
position: absolute;
background-color:#DF2943;
background-image:
url('path/spinner_animation02.gif');
background-size: 195px 195px;
background-repeat:no-repeat;
background-position:center;
}
Hope it helps!
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.
(Did some search but couldn't find the exact same question/answer)
I am displaying the YouTube's hqdefault thumbnails on my page. However, I noticed they are 480 by 360, which means they have black top and bottom bars for all 16:9 ratio videos (which are the majority)
Example is: http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg
My question is:
I want the image to auto scale to fit its container's width, which will be a percentage of the total window's width (this means I don't know the exact pixel value in advance). And hide the black bars, and of course don't distort the image's ratio.
Can this be done using CSS only (hopefully with good browser support)? -- I am ok to assume all images should be 16:9 (for those that are of other ratio, I am ok to cut off some part of it, and only display part of it in 16:9).
Thanks
(PS: I have a JS solution, but I want to see if it doable in CSS. The JS solution is to use JS to get the container's width, then set the container's size according to 16:9 ratio. Then stretch the image and position it in the center, hide the extra areas of it -- which basically hides its top and bottom black bars)
I found this solution. Here's an example :
You set the div to width:100%, it will now stretch to the container size, in this case, the body. Then you set the padding-bottom: 56.25%; to get the 16:9 ratio.
Now set overflow: hidden; to hide what's coming out of the div and set top: -16.75%; to hide the upper black strip.
HTML
<div class="stretchy-wrapper">
<div>
<img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
</div>
</div>
CSS
body {
width: 70%;
margin: 8px auto;
}
div.stretchy-wrapper{
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: blue;
overflow: hidden;
}
div.stretchy-wrapper > div {
position: absolute;
top: -16.75%; bottom: 0; left: 0; right: 0;
}
Maybe this - set the image as the background to a 16 x 9 div, then just set image width to 100% and position 50% 50%
div {
background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
background-size:100%;
background-position: 50% 50%;
height:180px;
width:320px;
}
<div></div>
I hope this jsfiddle will help you. Cheers!
working urljsfiddle
It will be fit even your web application/web site is responsive.
I have a page that displays a map with some pins placed on places of interest. Markup and style as follows:
HTML:
<div class="map">
<div class="pins">
Pin #1
...
Pin #12
</div>
CSS:
.map {
width: 100%;
height: 100%;
position: relative;
background: transparent url([image]) no-repeat 50% 50%;
background-size: cover;
}
.pins {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
{
.pins > a {
width: 20px;
height: 31px;
position: absolute;
}
My question is: how can I keep my pins, which are absolutely positioned to specific locations on the map, aligned correctly with the map? I've tried using percentage values for the pin positions but because the map is always centered, the alignments go off as soon as the map starts getting cropped at the sides.
I realise I can implement a JS fix, but I'm wondering if there's a pure HTML/CSS solution to this.
Thanks.
I like your question!
So what background-size cover does is keeping the perspective of the image.
This way you don't know how the displayed dimensions of the image are.
Execpt you knew the ratio in the first place.
I did some experimenting, with the fluid-video-padding-bottom "hack".
So imagine a 16/9 map.
All you need is a container that lays exact on top of the image (or it could be the very same container as in my example) and behaves the same as background-size cover. Achieved using padding-bottom trick.
The only thing left to do is resize the pins accordingly. (I used viewport based units)
My example.
padding-bottom: 56.25%; /* 16:9 */
Instead of using the padding bottom trick, you could use object-fit positioning. Which is not well supported yet.
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}