I've been searching for hours on the net, here and elsewhere, for a simple code that allows me to put an img(in this case im using SVG) to stretch and skew accordingly to the browser window size... however everyone has been talking about codes that maintain the aspect ratio... I do not want to maintain the ratio, i just want to force stretch the img/svg onto the 4 edges of the browser... anyone has a simple code for that?
I have been using
width:100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 7;
background-size:100% 100%;
but to no avail..
In HTML, there is actually a lot more flexibility with background images then actual images.
The approach I use is to create a div element and set it's background-image to the image you want to display.
Something link this:
#imageDiv
{
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
background-image:url('https://www.gravatar.com/avatar/dd3f93d8f93c5908d58711ff9092ba02?s=328&d=identicon&r=PG');
background-repeat:no-repeat;
background-size:100% 100%;
z-index:1;
}
See this jsfiddle: http://jsfiddle.net/2t17onko/2/
Related
I have an iframe that has a dynamic size and needs to stay in the bottom right of the screen. There are multiple elements in play such as window size and and a min-width, but ALL of my problems would be solved if I could reference my iframe from the bottom right rather than the bottom left.
So, is there a way to treat the iframe in a way that I could say something like:
iframe {
right: 0;
bottom: 0;
}
in css and have it stuck in the bottom right corner, even when the size of the frame changes?
You need to set
iframe {
position:fixed;
bottom:0;
right:0;
}
It sounds like you need to set the position of your iframe to fixed:
iframe{
bottom:0;
position:fixed;
right:0;
}
Yes, you can apply position:fixed to the iframe and have stuck to the bottom right hand corner like so:
iframe {
position: fixed;
right: 0;
bottom: 0;
}
https://jsfiddle.net/baav59vh/
Referring to this website – www.mrandmrsbutt.com – I'm trying to position the 'Upwaltham Barns' graphic at the bottom centre of the viewport, so no matter what size the viewport is the graphic will move with it and stay at the bottom.
I've tried adding the following custom CSS into my WordPress site, but it doesn't seem to work:
.fix{
position:absolute;
bottom:0px;
left:50%;
}
<img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/>
Here is all my custom CSS at the moment:
#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
background-size:cover;
background-position:center center;
height:100vh;
}
.centre{
display:inline-block;
text-align:center;
}
#navigation-bar{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
background-repeat:repeat-x;
height:48px;
}
p{margin-bottom:10px;}
.paper-background{
background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}
Can anyone help?
You don't want position: fixed;, you're on the right path using absolute.
The problem is that the parent divs of what you're targeting aren't all 100% height of the viewport. You've set the outer-most parent to height: 100vh;, but it really needs applying to the inner .vc_column_container container (as it's using bootstrap based styles, and BS columns get position relative) - so your down arrow and graphic are being positioned based on that.
Try something like this:
#main-banner .wpex-vc-columns-wrap .vc_column_container {
height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.5%;
}
That should get you closer to what you're aiming for, be sure to include all vendor prefixes with transform, however if you're using something like Autoprefixer or Bourbon you'll already have this covered...
There's some "custom" styles in there I'm guessing you've added from a page-builder that might mess the position of the graphic/arrow up, remove the unnecessary padding if it's bugging out.
Good luck with the wedding :-)
I think you need to change position:absolute to position:fixed in the .fix rule
.fix{
position:fixed;
bottom:0px;
left:50%;
}
This should send your graphic to the bottom of the viewport and left there even scrolling. The horizontal center could be a bit tricky, but you could try to use a fixed container with left and right set to 0.
.fixed-container{
position:fixed;
bottom:0px;
left:0;
right: 0;
}
The previous rule sets the container to the bottom of the viewport and extends horizontally.
img.centered {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
This rule is applied to the image to achieve centered alignment inside the container.
HTML code:
<div class="fixed-container">
<img class="centered" src="..image..." />
</div>
I think this should do the trick.
I am working on a website that has a slideshow right under the header. I want to limit the height of the slideshow responsively so that if it leaves 20-30% of the viewport on one screen resolution, it will do the same on the other. Currently my CSS looks like this.
#slideshow-container {
height: 70vh;
margin: 0;
padding: 0;
overflow: hidden;
}
#slideshow-container img {
height: auto;
width: 100%;
}
The images scale responsively and I'm using the viewport units to accomplish what I want. However, viewport units aren't very cross-browser compatible so I'm looking for a way to accomplish the same idea across all browsers. I'd prefer to only use CSS and not JavaScript or jQuery.
Since I do not know your markup, it's more difficult to help.
I'd do it with following lines of CSS:
/*reset stuff so that body fits the entire viewport*/
html,
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#slideshow-container {
height:70%;
...
}
This should do the job.
But in my opinion there's propably no reason for not using viewport units since it's supported in most current browsers: http://caniuse.com/viewport-units
The only problem shall be the mobile devices (and IE, of course).
I am working on setting up my opencart store. I have one large image as my background for my whole web page. Then all of the content scrolls over it and it stays put. The problem is that the background is not scaled correctly. It is scaled larger than the page. How can I get it to scale to 100% with opencart?
on my home page I have an img element and then use this to scale and position it.
img.bg {
min-height: 100%;
width: 100%;
height: auto;
position: fixed;
top:0;
left:0;
z-index: -999;
}
but with open cart I have to sent the image using the stylesheet rather than an image element. So I'm not sure how to apply these styles to the background class. The image is set to the background property of the body class.
The body CSS is probably the problem. You could try this
body {
max-height:100%;
max-width:100%;
}
I need to center a forward and back arrow on either side of an image within a larger div. The div's width and height vary according to the size of the image.
I have a live version of my work so far here: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html
And here's a jsfiddle to play with: http://jsfiddle.net/thwackukulele/4zHyd/
Though I don't know how much use that will be without the images linked in.
You'll see the forward and backward arrows are at the top of the blue area to either side of the image. I want them to be centered horizontally and vertically within this blue area.
I know that I am using a lot of positioning, and if there's an all around better way to attack this layout, please let me know. This is the best I could come up with. I am eventually handing these layouts off to a developer who is adding database CMS functionality. So my code doesn't need to be perfect, it just has to illustrate my intentions so that he can understand.
Thanks for any help in advance!!
.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}
Not sure I understand the question, thats alot of code to read through, maybe only post the code on the focus area.
Try:
.wrapper{
position:relative;
}
.left_arrow{
position:absolute;
left:0;
top:50%;
}
.right_arrow{
position:absolute;
right:0;
top:50%;
}
The solution is to absolute position the links to the div at 50% top and margin-top of negative half of the height of the link so:
http://jsfiddle.net/elclanrs/JKqnm/
html:
<div>
<img />
<a id="next"></a>
<a id="prev"></a>
</div>
css:
div {
position: relative;
height: 300px; /* Set size */
width: 500px;
background: blue;
}
#prev, #next {
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
background: red;
}
#prev {
left: -48px;
}
#next {
right: -48px;
}