I am trying to get my background image to fit screen without stretching it.
My image rotates every time my website is shown.
Any help would be greatly appreciated.
body {
height: 100%;
margin: 0;
padding: 0;
}
Code for background image.
#page-background {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
Code for background image to rotate..
<div id="page-background">
<?php
//Add as many links you want
$mylink[1] = '<img src="http://www.zarias.com/wp-content/uploads/2015/12/61-cute-puppies.jpg" width="100%" height="100%">
<div id="download">
<a href="images/more.png" title="Download this image. Use of this image is restricted to wallpaper only"download>* Download This Image *</a>
</div>';
// this will count your links itself and select a random one
$id = rand(1,count($mylink));
// this will display the random link
echo $mylink[$id];
?>
</div>
Why don't try to use viewports? You can set the image size responsive to your browser. viewports
Related
Is there a way to insert default page border to all the pages in the pdf?
There was any option found in mpdf. Any one help me ?
Create an image the same size as the paper stock you're using (A4, letter ect). Then set the image as a background on #page:
#page {
background: url(<?= __DIR__ ?>/background.png) no-repeat 0 0;
background-image-resize: 3;
}
Adjust the margins in #page so the text is displayed in-between your border.
Note: there's a bug in PDF.js that'll cause a blurry image to be displayed when using this method. It's fine when viewed in Adobe Reader though. If that's a problem, you can set an absolute-positioned Header or Footer and it'll do the same thing:
<style>
#page {
header: html_Header;
}
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<htmlpageheader name="Header">
<div id="background">
<img src="<?= __DIR__ ?>/background.png" />
</div>
</htmlpageheader>
I know this is a bit weird question. but quite curious about this. Can we make background property work like an overlay? without using any extra html tag.
E.g,
<img style="background: url('some image url to be overlayed on the actual image')" src="image src which will be hidden under the background image" alt="">
Is it possible?
Do you mean something like this? I used padding for the size.
img {
padding-bottom: 35%;
width: 500px;
background: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png);
height: 0;
}
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="" title="test">
You can do that, but you would have to pad your overlay image to reveal its background:
#img{
height: 20; // Front image height
width: 20; // Front image width
padding: 50px 80px; // needs to be adjusted depend on your BG img size
background-image: url('path_to_image');
background-repeat: no-repeat;
}
I have made a div (div1), which is equal to the browser window size. Then I have made another div (div2) inside the parent div (div1). Then I have placed an image inside the second div (div2). My browser window size is 1360X638 and my image size is 1600*1200.
I want the image to fit itself according to the parent div's (div1) size. So the image (which is larger than the window size) have to fit itself to the second div (div2), which is equal to window size), and this image will fit exactly to the div's size (so, there isn't any scrolling or cropping of image in the display).
I have searched for some time. The solution I found is to set the maximum height and width to 100%. I did this.
I wrote this part:
<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
<div style="max-height: 100%; max-width: 100%;">
<img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
</div>
</div>
The output is like this:
You can see there is a scroll in the right side. I don't want that there.
jQuery Solution - Proof of Concept
Suppose you have the following HTML:
<div class="container">
<img src="http://placehold.it/1600x1200" />
</div>
You can apply the following CSS rules to size an image to fit the view port (100% of browser width or height):
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
width: 100%;
background-color: red;
text-align: center; /* optional */
}
.container img {
vertical-align: top;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
Use the following jQuery method to pick the correct CSS rule depending on the aspect ratio of the view port:
function resizeImg() {
var thisImg= $('.container');
var refH = thisImg.height();
var refW = thisImg.width();
var refRatio = refW/refH;
var imgH = thisImg.children("img").height();
var imgW = thisImg.children("img").width();
if ( (imgW/imgH) > refRatio ) {
thisImg.addClass("portrait");
thisImg.removeClass("landscape");
} else {
thisImg.addClass("landscape");
thisImg.removeClass("portrait");
}
}
$(document).ready(resizeImg())
$(window).resize(function(){
resizeImg();
});
Demo fiddle: http://jsfiddle.net/audetwebdesign/y2L3Q/
This may not be the entire answer but it may be a place to start.
Reference
I worked on a related problem earlier, which may be of interest:
Make image fill div completely without stretching
I have 2 images - one is the main image and the other is like a picture frame that I'd like to position over the top of the main image.
The picture frame image is a png with a transparent center so the main image shows through.
The dimensions of the images are important - the inner main image has to be smaller than the frame so it is only visible through the center:
main.jpg = 367 x 550
frame.png = 405 x 597
I thought I had it with the following code...
<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>
...which works great until you see the screen on a mobile phone; the frame.png stretches because I've given the width as 100% but the background main.jpg doesn't stretch along with it.
I need the design to be fluid, so I need the images to stretch.
Is there a way to make sure the background stretches the same as the main image?
I've tried all kinds of different methods to get this working, absolutely positioning the frame in a div floating over the main image, etc but I couldn't get the main image to appear centered horizontally and vertically when I did that.
Is there any way to achieve what I want without resorting to javascript?
The reason I'm using 2 images by the way is because of file size. I need the main image to be jpg so I can keep it small, but I also need the transparency on the frame so that has to be png :(
I usually use this:
HTML:
<div id="frame">
<img id="myImg" src="main.jpg">
</div>
CSS:
#frame {
position: relative;
width: 597px;
height: 405px;
background-image: url(frame.png);
background-position: center;
background-size: cover; }
#myImg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
margin: auto; }
This works for all images and other elements with fixed dimensions, or a set max-width and max-height.
I hope this works for you :)
I've created a fiddle for you.
http://jsfiddle.net/avrahamcool/4VQzP/
in my fiddle, the frame is just a black background, and the img is just a red background. as you can see, no need for transparent frame (because the img is above it)
instead of centering the frame above the img, I'm centering the img above the frame.
(if I understood correctly, this also serves your purpose)
HTML:
<div id="Frame">
<span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>
CSS:
#Frame
{
width: 405px;
height: 597px;
background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
text-align: center;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
#Frame > img
{
vertical-align: middle;
}
I generally use another image absolute positioned as background. like:
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" />
<!-- Then do the positioning with classes -->
</div>
Give it a shot, hope it works as you want
If you set the image as absolute; it is going to lift out of it's container.
Floating may do the same.
What about z-index:1; and x-index:2; with margin:auto; ?
I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.